Cómo mostrar unidades en forma corta o larga

Introducción

Cuando muestras medidas en una interfaz, la unidad ocupa espacio junto al número. La distancia 5 kilómetros puede aparecer como "5 km", "5 kilómetros" o "5km" dependiendo de cuánto espacio tengas disponible y qué tan claro necesites ser. Cada formato intercambia legibilidad por espacio horizontal.

Diferentes contextos requieren diferentes opciones de formato. Un panel móvil que muestra múltiples métricas se beneficia de unidades compactas como "km" o "kg". Una aplicación educativa que enseña a los estudiantes sobre medidas necesita unidades claras y completas como "kilómetros" o "kilogramos". Una visualización densa de datos usa la forma más compacta posible para ajustar más información en pantalla.

El Intl.NumberFormat de JavaScript proporciona la opción unitDisplay para controlar esta elección. Puedes seleccionar entre visualización corta con abreviaturas estándar, visualización larga con palabras completas o visualización estrecha con la representación más compacta posible. Esta opción te da control preciso sobre cómo aparecen las unidades a los usuarios.

Qué controla la opción unitDisplay

La opción unitDisplay funciona cuando estableces style en "unit" en Intl.NumberFormat. Acepta tres valores: "short", "long" y "narrow". Cada valor produce un nivel diferente de detalle para la parte de la unidad en la salida formateada.

El valor short produce unidades abreviadas estándar como "5 km" o "10 lb". El valor long escribe el nombre completo de la unidad como "5 kilómetros" o "10 libras". El valor narrow produce la representación más compacta como "5km" o "10lb", a menudo eliminando espacios entre el número y la unidad.

const shortFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

console.log(shortFormatter.format(5));
// Output: "5 km"

const longFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

console.log(longFormatter.format(5));
// Output: "5 kilometers"

const narrowFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

console.log(narrowFormatter.format(5));
// Output: "5km"

La opción unitDisplay tiene como valor predeterminado "short" si la omites. Esto significa que el formato de unidades utiliza abreviaturas estándar a menos que solicites explícitamente un estilo de visualización diferente.

Formatear unidades con visualización corta

La visualización corta utiliza abreviaturas estándar que la mayoría de las personas reconocen. Este formato equilibra la legibilidad con la eficiencia de espacio.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

console.log(formatter.format(5));
// Output: "5 km"

console.log(formatter.format(42));
// Output: "42 km"

El formateador añade un espacio entre el número y la unidad abreviada. Esta separación mejora la legibilidad mientras mantiene la salida compacta.

Puedes formatear diferentes tipos de unidades con visualización corta.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "short"
});

const volumeFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "liter",
  unitDisplay: "short"
});

console.log(distanceFormatter.format(10));
// Output: "10 km"

console.log(weightFormatter.format(25));
// Output: "25 kg"

console.log(volumeFormatter.format(3.5));
// Output: "3.5 L"

Cada tipo de unidad utiliza su abreviatura estándar. La distancia utiliza km, el peso utiliza kg y el volumen utiliza L. Estas abreviaturas son ampliamente reconocidas y funcionan bien en la mayoría de los contextos.

La visualización corta es el comportamiento predeterminado. Si omites la opción unitDisplay, el formateador utiliza la visualización corta automáticamente.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer"
});

console.log(formatter.format(5));
// Output: "5 km"

Este valor predeterminado hace que la visualización corta sea conveniente cuando deseas unidades abreviadas estándar sin especificar explícitamente la opción de visualización.

Formatear unidades con visualización larga

La visualización larga escribe el nombre completo de la unidad. Este formato proporciona máxima claridad a costa de espacio horizontal adicional.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

console.log(formatter.format(5));
// Output: "5 kilometers"

console.log(formatter.format(1));
// Output: "1 kilometer"

El formateador maneja automáticamente las formas singular y plural. Una unidad utiliza el singular "kilómetro" mientras que múltiples unidades utilizan el plural "kilómetros". No necesitas determinar manualmente qué forma usar.

Puedes formatear diferentes unidades con visualización larga para ver los nombres completos de las unidades.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "mile",
  unitDisplay: "long"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "pound",
  unitDisplay: "long"
});

const temperatureFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "celsius",
  unitDisplay: "long"
});

console.log(distanceFormatter.format(10));
// Output: "10 miles"

console.log(weightFormatter.format(25));
// Output: "25 pounds"

console.log(temperatureFormatter.format(22));
// Output: "22 degrees Celsius"

La visualización larga hace que la medida sea inmediatamente clara sin requerir que los usuarios interpreten abreviaturas. Las unidades de temperatura se benefician particularmente de la visualización larga porque las abreviaturas como C y F pueden ser ambiguas.

Los usuarios que no están familiarizados con las abreviaturas de medidas encuentran las unidades escritas completamente más accesibles. El contenido educativo, los informes formales y las interfaces enfocadas en la accesibilidad se benefician de esta explicitud.

Formatear unidades con visualización estrecha

La visualización estrecha produce la representación más compacta posible. Este formato elimina espacios y usa símbolos mínimos para ahorrar cada carácter.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

console.log(formatter.format(5));
// Output: "5km"

console.log(formatter.format(42));
// Output: "42km"

El formateador elimina el espacio entre el número y la unidad, creando una salida más condensada. Esto ahorra espacio horizontal en diseños extremadamente limitados.

Diferentes unidades producen diferentes representaciones estrechas basadas en convenciones estándar.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

const speedFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer-per-hour",
  unitDisplay: "narrow"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "narrow"
});

console.log(distanceFormatter.format(10));
// Output: "10km"

console.log(speedFormatter.format(60));
// Output: "60km/h"

console.log(weightFormatter.format(25));
// Output: "25kg"

La visualización estrecha funciona mejor cuando el espacio es extremadamente limitado y los usuarios están familiarizados con el contexto de medición. El formato condensado asume que los usuarios pueden interpretar las unidades sin separación o explicación explícita.

Comparar visualización corta, larga y estrecha

Las diferencias entre las tres opciones de visualización se vuelven claras cuando formateas las mismas mediciones con cada opción.

const shortFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

const longFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

const narrowFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

const distances = [1, 5, 10, 42];

distances.forEach(distance => {
  console.log(`${distance}:`);
  console.log(`  Short:  ${shortFormatter.format(distance)}`);
  console.log(`  Long:   ${longFormatter.format(distance)}`);
  console.log(`  Narrow: ${narrowFormatter.format(distance)}`);
});

// Output:
// 1:
//   Short:  1 km
//   Long:   1 kilometer
//   Narrow: 1km
// 5:
//   Short:  5 km
//   Long:   5 kilometers
//   Narrow: 5km
// 10:
//   Short:  10 km
//   Long:   10 kilometers
//   Narrow: 10km
// 42:
//   Short:  42 km
//   Long:   42 kilometers
//   Narrow: 42km

La visualización corta usa 4-5 caracteres para la porción de la unidad. La visualización larga usa 9-10 caracteres incluyendo formas plurales. La visualización estrecha usa 2 caracteres y elimina el espacio. Esta progresión muestra el equilibrio entre claridad y eficiencia de espacio.

Puedes comparar diferentes tipos de unidades para ver cómo cada opción de visualización maneja varias mediciones.

const units = [
  { unit: "mile", value: 10 },
  { unit: "pound", value: 25 },
  { unit: "gallon", value: 5 },
  { unit: "fahrenheit", value: 72 }
];

units.forEach(({ unit, value }) => {
  const short = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "short"
  }).format(value);

  const long = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "long"
  }).format(value);

  const narrow = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "narrow"
  }).format(value);

  console.log(`${unit}:`);
  console.log(`  Short:  ${short}`);
  console.log(`  Long:   ${long}`);
  console.log(`  Narrow: ${narrow}`);
});

// Output:
// mile:
//   Short:  10 mi
//   Long:   10 miles
//   Narrow: 10mi
// pound:
//   Short:  25 lb
//   Long:   25 pounds
//   Narrow: 25lb
// gallon:
//   Short:  5 gal
//   Long:   5 gallons
//   Narrow: 5gal
// fahrenheit:
//   Short:  72°F
//   Long:   72 degrees Fahrenheit
//   Narrow: 72°F

Las unidades de temperatura muestran un comportamiento interesante. La visualización corta y estrecha usan el símbolo de grado y la unidad abreviada, mientras que la visualización larga escribe "grados Fahrenheit". Esto hace que la visualización larga sea particularmente valiosa para temperatura donde el contexto completo importa.

Cómo varía la visualización de unidades entre idiomas

Las tres opciones de visualización se adaptan a la configuración regional que especifiques. Diferentes idiomas usan diferentes abreviaciones, nombres de unidades y convenciones de espaciado.

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer",
    unitDisplay: "short"
  });

  const longFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer",
    unitDisplay: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(5)}`);
  console.log(`  Long:  ${longFormatter.format(5)}`);
});

// Output:
// en-US:
//   Short: 5 km
//   Long:  5 kilometers
// de-DE:
//   Short: 5 km
//   Long:  5 Kilometer
// fr-FR:
//   Short: 5 km
//   Long:  5 kilomètres
// ja-JP:
//   Short: 5 km
//   Long:  5キロメートル

La visualización corta permanece consistente entre configuraciones regionales porque "km" es una abreviación reconocida internacionalmente. La visualización larga varía porque cada idioma tiene su propia palabra para kilómetro. El alemán usa "Kilometer", el francés usa "kilomètres" y el japonés usa "キロメートル".

El formateador maneja las variaciones gramaticales automáticamente. El alemán no pluraliza "Kilometer" de la misma manera que el inglés pluraliza "kilometers". El francés añade un acento a la palabra. El japonés utiliza un sistema de escritura completamente diferente. La API Intl gestiona estas diferencias según la configuración regional.

Algunas configuraciones regionales manejan la visualización estrecha de manera diferente a otras.

const locales = ["en-US", "de-DE", "fr-FR"];

locales.forEach(locale => {
  const narrowFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer-per-hour",
    unitDisplay: "narrow"
  });

  console.log(`${locale}: ${narrowFormatter.format(60)}`);
});

// Output:
// en-US: 60km/h
// de-DE: 60 km/h
// fr-FR: 60 km/h

El inglés elimina el espacio en la visualización estrecha, produciendo "60km/h". El alemán y el francés conservan el espacio, produciendo "60 km/h". Estas convenciones específicas de cada configuración regional reflejan cómo cada cultura escribe las mediciones en forma compacta.

Cuándo usar la visualización corta

La visualización corta funciona mejor en contextos donde el espacio importa pero las abreviaturas son ampliamente comprendidas. Esta es la opción más común para aplicaciones de uso general.

Las interfaces móviles se benefician de la visualización corta porque el ancho de pantalla es limitado. Las tarjetas de panel que muestran múltiples métricas necesitan unidades compactas para ajustar la información en pantalla. Usar "42 km" en lugar de "42 kilómetros" ahorra 6 caracteres por medición, sumando a través de múltiples valores.

Las tablas de datos que muestran mediciones en columnas necesitan un ancho consistente. Las abreviaturas cortas como "km", "kg" y "L" mantienen los anchos de columna manejables. Las unidades largas como "kilómetros", "kilogramos" y "litros" amplían las columnas innecesariamente.

Las interfaces científicas y técnicas utilizan la visualización corta porque los usuarios en estos contextos están familiarizados con las abreviaturas estándar. Los ingenieros, científicos y profesionales técnicos esperan que las mediciones utilicen unidades abreviadas.

Los mapas y visualizaciones utilizan la visualización corta para evitar saturar la interfaz con texto. Mostrar "5 km" en un marcador de mapa es más legible que "5 kilómetros" cuando el espacio alrededor del marcador es limitado.

La visualización corta logra un equilibrio entre claridad y eficiencia. La mayoría de los usuarios reconocen abreviaturas estándar como km, mi, kg, lb, L y gal sin confusión.

Cuándo usar la visualización larga

La visualización larga funciona mejor cuando la claridad y la accesibilidad importan más que la eficiencia de espacio. Esta elección hace que las mediciones sean inmediatamente comprensibles sin requerir interpretación.

El contenido educativo se beneficia de la visualización larga porque los estudiantes pueden no estar familiarizados con las abreviaturas de medición. Los materiales didácticos que explican distancia, peso o volumen deben escribir las unidades completas para evitar confusión.

Las interfaces enfocadas en accesibilidad se benefician de la visualización larga porque los lectores de pantalla pronuncian las palabras completas de forma más natural. Un lector de pantalla que anuncia "5 kilómetros" suena más natural que "5 km", que podría leerse como "5 k m" o "5 ka eme".

Los documentos formales e informes usan la visualización larga para mantener un tono profesional. Los informes empresariales, artículos científicos y documentos oficiales típicamente escriben las mediciones completas en lugar de abreviarlas.

Las audiencias internacionales se benefician de la visualización larga cuando los sistemas de medición varían. Los usuarios no familiarizados con las unidades métricas o imperiales encuentran los nombres completos como "kilómetros" o "millas" más fáciles de entender que las abreviaturas.

Los contextos donde los usuarios están aprendiendo sobre mediciones o unidades necesitan la visualización larga. Las aplicaciones de recetas que enseñan medidas de cocina, aplicaciones de fitness que explican distancias o aplicaciones de salud que muestran pesos deben usar unidades claras y completas.

Cuándo usar la visualización estrecha

La visualización estrecha funciona mejor en contextos extremadamente limitados de espacio donde cada carácter importa y los usuarios están muy familiarizados con el dominio de medición.

Las visualizaciones de datos con información densa se benefician de la visualización estrecha. Las etiquetas de gráficos, anotaciones de gráficas y superposiciones de datos necesitan texto mínimo para evitar ocultar el contenido visual subyacente. Usar "60km/h" en lugar de "60 km/h" ahorra un carácter mientras permanece legible para usuarios que entienden el contexto.

Los mosaicos compactos de panel que muestran métricas individuales pueden usar la visualización estrecha cuando el tamaño del mosaico es mínimo. Un widget de velocímetro que muestra "60 km/h" en texto grande encaja mejor que "60 kilómetros por hora".

Los widgets móviles con espacio de pantalla limitado usan la visualización estrecha para maximizar la densidad de información. Un widget de clima que muestra temperatura, velocidad del viento y precipitación en un pequeño widget de pantalla de inicio se beneficia de unidades compactas.

Las interfaces técnicas para usuarios expertos pueden usar la visualización estrecha porque la audiencia comprende las mediciones sin separación explícita. Las pantallas de aviación, herramientas de ingeniería e instrumentos científicos a menudo usan notación de unidades compacta que los expertos reconocen instantáneamente.

La visualización estrecha asume que los usuarios están familiarizados con el contexto de medición y pueden interpretar las unidades sin asistencia. Esta opción intercambia claridad por máxima eficiencia de espacio.

Combinar visualización de unidades con otras opciones de formato

La opción unitDisplay funciona con todas las demás opciones de formato de números. Puedes controlar los decimales, la agrupación y otros formatos mientras eliges el estilo de visualización de unidades.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long",
  maximumFractionDigits: 2
});

console.log(formatter.format(42.7856));
// Output: "42.79 kilometers"

console.log(formatter.format(5.1));
// Output: "5.1 kilometers"

La opción maximumFractionDigits controla la precisión decimal mientras que unitDisplay controla el formato de la unidad. Estas opciones funcionan juntas para producir el formato exacto que necesitas.

Puedes combinar la visualización de unidades con notación compacta para mostrar mediciones grandes en forma legible.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "meter",
  unitDisplay: "long",
  notation: "compact"
});

console.log(formatter.format(1500));
// Output: "1.5K meters"

console.log(formatter.format(2400000));
// Output: "2.4M meters"

Esta combinación funciona bien al mostrar mediciones muy grandes donde tanto la magnitud como la unidad necesitan ser claras. Los datos científicos, distancias geográficas o mediciones astronómicas se benefician de la notación compacta con visualización de unidades larga.

Puedes combinar la visualización de unidades con visualización de signo para mostrar cambios o diferencias en mediciones.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "long",
  signDisplay: "always"
});

console.log(formatter.format(2.5));
// Output: "+2.5 kilograms"

console.log(formatter.format(-1.8));
// Output: "-1.8 kilograms"

Este formato funciona bien para mostrar cambios de peso, diferencias de elevación o cualquier medición donde la dirección del cambio importa. El signo explícito combinado con unidades escritas hace que el cambio sea inmediatamente claro.

Qué recordar

La opción unitDisplay controla cómo aparecen las unidades al formatear medidas con Intl.NumberFormat. Configúrala en "short" para abreviaturas estándar como "5 km", "long" para unidades escritas completas como "5 kilómetros", o "narrow" para formas compactas como "5km". La opción tiene como valor predeterminado "short" si se omite.

Utiliza la visualización corta para aplicaciones de uso general donde el espacio es importante y los usuarios comprenden las abreviaturas estándar. Utiliza la visualización larga cuando la claridad y la accesibilidad sean más importantes que el espacio, o cuando los usuarios puedan no estar familiarizados con las abreviaturas. Utiliza la visualización estrecha solo en contextos extremadamente limitados de espacio donde los usuarios estén muy familiarizados con el dominio de medición.

El formateador maneja las variaciones específicas de la configuración regional automáticamente, incluyendo diferentes abreviaturas, nombres de unidades, convenciones de espaciado y formas plurales. Combina unitDisplay con otras opciones de formato como decimales, notación compacta y visualización de signos para crear el formato de medida exacto que tu aplicación necesita.