Cómo formatear medidas como 5 kilómetros o 10 libras

Introducción

Las mediciones comunican cantidades con unidades que les dan significado. Cinco kilómetros indica una distancia, diez libras indica un peso, y veinte grados Celsius indica una temperatura. Las aplicaciones que muestran mediciones necesitan mostrar tanto el valor numérico como la unidad en un formato que los usuarios comprendan.

Diferentes localizaciones formatean las mediciones de manera diferente. Los estadounidenses escriben "5 km" o "5 kilómetros" dependiendo del contexto. Los alemanes podrían escribir "5 km" con diferentes convenciones de espaciado. La misma medición puede aparecer como "5 km", "5km", o "5 kilómetros" dependiendo de la localización y la verbosidad deseada. Algunas regiones utilizan unidades métricas mientras que otras utilizan unidades imperiales, pero el formato de las unidades también varía según la localización.

JavaScript proporciona la API Intl.NumberFormat para formatear mediciones con formato de unidades apropiado para cada localización. Esta lección explica cómo formatear mediciones como distancia, peso, temperatura, volumen y velocidad con la visualización de unidades correcta para cualquier localización.

Las mediciones necesitan unidades para contexto

Los números sin unidades carecen de significado en muchos contextos. El número 5 podría representar 5 kilómetros, 5 millas, 5 metros o 5 pies. Los usuarios no pueden interpretar el valor sin conocer la unidad que se está midiendo.

Las unidades deben mostrarse de manera consistente con el valor numérico. Cuando escribes "5 kilómetros", la unidad "kilómetros" es información esencial. Cuando escribes "10 libras", la unidad "libras" identifica la medición como peso en lugar de moneda.

Existen diferentes sistemas de unidades para el mismo tipo de medición. La distancia puede medirse en kilómetros, millas, metros, pies u otras unidades. El peso puede medirse en kilogramos, libras, onzas o gramos. La temperatura puede medirse en Celsius, Fahrenheit o Kelvin. Las aplicaciones necesitan formatear cualquier sistema de unidades que utilicen de una manera que coincida con las expectativas del usuario.

Formatear unidades con Intl.NumberFormat

El constructor Intl.NumberFormat crea un formateador de unidades cuando pasas style: 'unit' en las opciones. También debes especificar qué unidad formatear usando la opción unit con un identificador de unidad.

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

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

Esto crea un formateador para inglés estadounidense que muestra valores en kilómetros. El método format() convierte el número a una cadena con la abreviatura de la unidad kilómetro.

La opción unit acepta identificadores de unidades estandarizados. Estos identificadores usan palabras en minúsculas separadas por guiones. Los identificadores comunes incluyen kilometer, meter, mile, pound, kilogram, celsius, fahrenheit, liter y gallon.

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

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

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

console.log(weightFormatter.format(10));
// Salida: "10 lb"

Cada formateador aplica automáticamente la abreviatura de unidad apropiada para el identificador de unidad especificado. No necesitas saber qué abreviatura corresponde a cada identificador de unidad.

La configuración regional determina el formato de las unidades

El parámetro de configuración regional controla cómo se formatean las unidades, incluyendo espaciado, separadores y abreviaturas de unidades. La misma unidad produce diferentes salidas dependiendo de la configuración regional.

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

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'kilometer'
});

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'unit',
  unit: 'kilometer'
});

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

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

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

Aunque los kilómetros usan abreviaturas similares en diferentes configuraciones regionales, las convenciones de espaciado y separadores varían. La API Intl maneja estas reglas de formato específicas de cada configuración regional automáticamente.

Control de la verbosidad de visualización de unidades

La opción unitDisplay controla si las unidades aparecen en forma abreviada, completa o mínima. La opción acepta tres valores: "short" para abreviaturas, "long" para nombres completos de unidades, y "narrow" para visualización mínima.

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'
});

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

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

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

El formato short utiliza abreviaturas estándar como "km" o "lb". El formato long utiliza nombres completos de unidades como "kilometers" o "pounds". El formato narrow utiliza una visualización mínima con espaciado reducido o sin espaciado. El valor predeterminado es short cuando no se especifica unitDisplay.

El locale afecta cómo aparecen las unidades en forma larga. Los nombres completos de las unidades se traducen y ajustan según las reglas gramaticales de cada idioma.

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

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

const esFormatter = new Intl.NumberFormat('es-ES', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

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

console.log(deFormatter.format(5));
// Output: "5 Kilometer"

console.log(esFormatter.format(5));
// Output: "5 kilómetros"

Cada locale proporciona la traducción apropiada y la forma gramatical para el nombre de la unidad.

Formateo de medidas de peso

Las medidas de peso utilizan identificadores de unidad como pound, kilogram, ounce, y gram. Estos identificadores funcionan de la misma manera que las unidades de distancia.

const poundFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'pound'
});

const kilogramFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilogram'
});

console.log(poundFormatter.format(10));
// Output: "10 lb"

console.log(kilogramFormatter.format(10));
// Output: "10 kg"

Puedes formatear el peso en forma larga para mostrar los nombres completos de las unidades.

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

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

console.log(formatter.format(10));
// Output: "10 pounds"

El formateador maneja automáticamente las formas singulares y plurales según el valor. Una libra utiliza la forma singular mientras que diez libras utiliza la forma plural.

Formatear mediciones de temperatura

Las mediciones de temperatura utilizan identificadores de unidad como celsius y fahrenheit. Estas unidades se formatean con símbolos de grado en forma abreviada.

const celsiusFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius'
});

const fahrenheitFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'fahrenheit'
});

console.log(celsiusFormatter.format(20));
// Output: "20°C"

console.log(fahrenheitFormatter.format(68));
// Output: "68°F"

La forma larga muestra los nombres completos de las escalas de temperatura.

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

const fahrenheitFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'fahrenheit',
  unitDisplay: 'long'
});

console.log(celsiusFormatter.format(20));
// Output: "20 degrees Celsius"

console.log(fahrenheitFormatter.format(68));
// Output: "68 degrees Fahrenheit"

El formateo de temperatura incluye automáticamente la terminología de grados apropiada para cada escala.

Formatear mediciones de volumen

Las mediciones de volumen utilizan identificadores de unidad como liter, gallon, milliliter y fluid-ounce. Estos funcionan como otros tipos de unidades.

const literFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'liter'
});

const gallonFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'gallon'
});

console.log(literFormatter.format(2));
// Output: "2 L"

console.log(gallonFormatter.format(2));
// Output: "2 gal"

Las unidades de volumen también admiten visualización en forma larga con ortografía específica según la configuración regional.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'liter',
  unitDisplay: 'long'
});

const gbFormatter = new Intl.NumberFormat('en-GB', {
  style: 'unit',
  unit: 'liter',
  unitDisplay: 'long'
});

console.log(usFormatter.format(2));
// Output: "2 liters"

console.log(gbFormatter.format(2));
// Output: "2 litres"

La configuración regional del inglés británico utiliza "litres" mientras que el inglés americano utiliza "liters".

Formatear unidades compuestas

Las unidades compuestas combinan dos unidades simples con una relación "por". Las mediciones de velocidad como millas por hora o kilómetros por hora utilizan unidades compuestas. Las mediciones de eficiencia de combustible como litros por 100 kilómetros también utilizan unidades compuestas.

Los identificadores de unidades compuestas unen dos unidades simples con -per-. Por ejemplo, mile-per-hour combina millas y horas, kilometer-per-hour combina kilómetros y horas.

const mphFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'mile-per-hour'
});

const kphFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer-per-hour'
});

console.log(mphFormatter.format(60));
// Output: "60 mph"

console.log(kphFormatter.format(100));
// Output: "100 km/h"

Cada unidad compuesta se formatea con la abreviatura apropiada combinando ambas partes de la unidad.

La forma larga muestra unidades compuestas con nombres completos y preposiciones apropiadas según la configuración regional.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'mile-per-hour',
  unitDisplay: 'long'
});

console.log(formatter.format(60));
// Output: "60 miles per hour"

El formateador construye automáticamente la frase de unidad compuesta utilizando la gramática correcta para la configuración regional.

Obtener identificadores de unidades disponibles

El método Intl.supportedValuesOf() devuelve un array de todos los identificadores de unidades compatibles en tu entorno JavaScript. Este método toma la cadena 'unit' como argumento.

const units = Intl.supportedValuesOf('unit');

console.log(units);
// Salida: Array de identificadores de unidades como:
// ["acre", "bit", "byte", "celsius", "centimeter", "day",
//  "degree", "fahrenheit", "fluid-ounce", "foot", "gallon",
//  "gram", "hectare", "hour", "inch", "kilogram", "kilometer",
//  "liter", "meter", "mile", "millimeter", "ounce", "pound",
//  "second", "stone", "week", "yard", ...]

El array devuelto incluye todas las unidades simples disponibles para formatear. Puedes usar cualquier identificador de este array con la opción unit.

Este método es útil cuando necesitas verificar si una unidad específica es compatible o cuando quieres proporcionar a los usuarios una lista de unidades disponibles.

const units = Intl.supportedValuesOf('unit');

const hasKilometer = units.includes('kilometer');
const hasPound = units.includes('pound');

console.log(hasKilometer);
// Salida: true

console.log(hasPound);
// Salida: true

Puedes verificar unidades específicas antes de crear formateadores para manejar entornos con diferentes niveles de soporte.

Combinar con opciones de formato de números

Los formateadores de unidades admiten las mismas opciones de formato de números que otros estilos de Intl.NumberFormat. Puedes controlar los decimales, dígitos significativos y otras propiedades numéricas.

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

console.log(formatter.format(5.123));
// Salida: "5.12 km"

console.log(formatter.format(5.5));
// Salida: "5.5 km"

El formateador aplica reglas de redondeo y decimales antes de añadir la unidad.

Puedes formatear números grandes con separadores de miles.

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

console.log(formatter.format(12345.67));
// Salida: "12,345.67 km"

Todas las características estándar de formato de números funcionan con el formato de unidades.

Formatear medidas para la configuración regional del usuario

En lugar de codificar una configuración regional específica, puedes utilizar las preferencias de idioma del navegador del usuario. La propiedad navigator.language devuelve la configuración regional preferida del usuario.

const userLocale = navigator.language;

const formatter = new Intl.NumberFormat(userLocale, {
  style: 'unit',
  unit: 'kilometer'
});

console.log(formatter.format(5));
// La salida varía según la configuración regional del usuario

Este enfoque muestra las medidas de acuerdo con las expectativas de formato de cada usuario. Diferentes usuarios ven la misma medida formateada según las convenciones de su configuración regional.

Mostrar medidas en aplicaciones

Puedes usar formateadores de unidades en cualquier lugar donde muestres medidas a los usuarios. Esto incluye aplicaciones de fitness que muestran distancia o peso, aplicaciones meteorológicas que muestran temperatura, aplicaciones de recetas que muestran volumen y aplicaciones de navegación que muestran velocidad.

const distanceFormatter = new Intl.NumberFormat(navigator.language, {
  style: 'unit',
  unit: 'kilometer',
  maximumFractionDigits: 1
});

const distance = 5.234;

document.getElementById('distance').textContent = distanceFormatter.format(distance);
// Muestra: "5,2 km" (o equivalente según la configuración regional)

Las cadenas formateadas funcionan como cualquier otro valor de cadena. Puedes insertarlas en contenido de texto, atributos o cualquier contexto donde muestres información a los usuarios.

Reutilizar formateadores de unidades

Crear una nueva instancia de Intl.NumberFormat implica cargar datos de configuración regional y procesar opciones. Cuando formateas múltiples medidas con la misma configuración regional y unidad, crea el formateador una vez y reutilízalo.

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

const distances = [1.5, 3.2, 5.0, 10.8];

distances.forEach(distance => {
  console.log(formatter.format(distance));
});
// Salida:
// "1.5 km"
// "3.2 km"
// "5 km"
// "10.8 km"

Este patrón es más eficiente que crear un nuevo formateador para cada valor. La diferencia de rendimiento se vuelve significativa cuando se formatean arrays o listas con muchas medidas.