Cómo mostrar unidades en forma corta o larga

Introducción

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

Diferentes contextos requieren diferentes opciones de formato. Un panel de control 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 mediciones necesita unidades claras y completas como "kilómetros" o "kilogramos". Una visualización con alta densidad de datos utiliza la forma más compacta posible para mostrar 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 un control preciso sobre cómo aparecen las unidades para los usuarios.

Qué controla la opción unitDisplay

La opción unitDisplay funciona cuando estableces style como "unit" en Intl.NumberFormat. Acepta tres valores: "short", "long" y "narrow". Cada valor produce un nivel diferente de verbosidad 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 deletrea 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));
// Salida: "5 km"

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

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

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

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

La opción unitDisplay tiene como valor predeterminado "short" si la omites. Esto significa que el formato de unidad 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 usa km, el peso usa kg y el volumen usa 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 automáticamente la visualización corta.

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 singulares y plurales. Una unidad utiliza el singular "kilometer" mientras que múltiples unidades utilizan el plural "kilometers". 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 abreviaturas como C y F pueden ser ambiguas.

Los usuarios que no están familiarizados con las abreviaturas de medidas encuentran las unidades escritas completas más accesibles. El contenido educativo, los informes formales y las interfaces centradas 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 utiliza 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 explícita o explicación.

Comparar visualización corta, larga y estrecha

Las diferencias entre las tres opciones de visualización se vuelven claras cuando formateas las mismas medidas 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 utiliza 4-5 caracteres para la parte de la unidad. La visualización larga utiliza 9-10 caracteres incluyendo formas plurales. La visualización estrecha utiliza 2 caracteres y elimina el espacio. Esta progresión muestra el equilibrio entre claridad y eficiencia espacial.

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

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 utilizan el símbolo de grado y la unidad abreviada, mientras que la visualización larga escribe "degrees Fahrenheit". Esto hace que la visualización larga sea particularmente valiosa para la temperatura donde el contexto completo es importante.

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

Las tres opciones de visualización se adaptan al idioma que especifiques. Diferentes idiomas utilizan diferentes abreviaturas, 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 se mantiene consistente en todos los idiomas porque "km" es una abreviatura 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 automáticamente las variaciones gramaticales. 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 el idioma.

Algunos idiomas manejan la visualización estrecha de manera diferente a otros.

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 mantienen el espacio, produciendo "60 km/h". Estas convenciones específicas de cada idioma reflejan cómo cada cultura escribe las medidas en forma compacta.

Cuándo usar la visualización corta

La visualización corta funciona mejor en contextos donde el espacio es importante 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 5 caracteres por medida, sumando espacio a través de múltiples valores.

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

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

Los mapas y visualizaciones utilizan 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 del espacio. Esta opció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 deletrear las unidades para evitar confusiones.

Las interfaces centradas en la accesibilidad se benefician de la visualización larga porque los lectores de pantalla pronuncian las palabras deletreadas de manera 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 utilizan visualización larga para mantener un tono profesional. Los informes empresariales, artículos científicos y documentos oficiales típicamente deletrean las mediciones 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 unidades métricas o imperiales encuentran nombres deletreados 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 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 deletreadas.

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 y superposiciones de datos necesitan un texto mínimo para evitar ocultar el contenido visual subyacente. Usar "60km/h" en lugar de "60 km/h" ahorra un carácter mientras sigue siendo legible para usuarios que entienden el contexto.

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

Los widgets móviles con espacio de pantalla limitado utilizan visualización estrecha para maximizar la densidad de información. Un widget meteorológico 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 visualización estrecha porque la audiencia entiende las mediciones sin separación explícita. Las pantallas de aviación, herramientas de ingeniería e instrumentos científicos a menudo utilizan notación de unidad 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 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 lugares decimales, 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));
// Salida: "42.79 kilometers"

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

La opción maximumFractionDigits controla la precisión decimal mientras que unitDisplay controla el formato de la unidad. Estas opciones trabajan 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));
// Salida: "1.5K meters"

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

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

Puedes combinar la visualización de unidades con la visualización de signos 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));
// Salida: "+2.5 kilograms"

console.log(formatter.format(-1.8));
// Salida: "-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 deletreadas 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 como "short" para abreviaturas estándar como "5 km", "long" para unidades escritas completamente como "5 kilómetros", o "narrow" para formas compactas como "5km". La opción predeterminada es "short" si se omite.

Utiliza la visualización corta para aplicaciones de uso general donde el espacio importa y los usuarios comprenden las abreviaturas estándar. Utiliza la visualización larga cuando la claridad y la accesibilidad son más importantes que el espacio, o cuando los usuarios pueden 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 automáticamente las variaciones específicas del idioma, incluyendo diferentes abreviaturas, nombres de unidades, convenciones de espaciado y formas plurales. Combina unitDisplay con otras opciones de formato como lugares decimales, notación compacta y visualización de signos para crear el formato de medición exacto que tu aplicación necesita.