Cómo formatear medidas como 5 kilómetros o 10 libras
Muestra distancia, peso, temperatura y otras medidas con formato y unidades apropiadas para cada configuración regional
Introducción
Las medidas 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 medidas necesitan mostrar tanto el valor numérico como la unidad en un formato que los usuarios comprendan.
Diferentes configuraciones regionales formatean las medidas 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 medida puede aparecer como "5 km", "5km" o "5 kilómetros" dependiendo de la configuración regional y el nivel de detalle deseado. Algunas regiones usan unidades métricas mientras que otras usan unidades imperiales, pero el formato de las unidades también varía según la configuración regional.
JavaScript proporciona la API Intl.NumberFormat para formatear medidas con el formato de unidad apropiado para cada configuración regional. Esta lección explica cómo formatear medidas como distancia, peso, temperatura, volumen y velocidad con la visualización de unidad correcta para cualquier configuración regional.
Las medidas necesitan unidades para el 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 medida como peso en lugar de moneda.
Existen diferentes sistemas de unidades para el mismo tipo de medida. 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));
// Output: "5 km"
Esto crea un formateador para inglés estadounidense que muestra valores en kilómetros. El método format() convierte el número en una cadena con la abreviatura de la unidad kilómetro.
La opción unit acepta identificadores de unidad 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));
// Output: "5 km"
console.log(weightFormatter.format(10));
// Output: "10 lb"
Cada formateador aplica automáticamente la abreviatura de unidad apropiada para la unidad especificada. No necesitas saber qué abreviatura corresponde a cada identificador de unidad.
La configuración regional determina el formato de 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 resultados 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));
// Output: "5 km"
console.log(deFormatter.format(5));
// Output: "5 km"
console.log(frFormatter.format(5));
// Output: "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.
Controlar 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 de unidad completos 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 usa abreviaturas estándar como "km" o "lb". El formato long usa nombres de unidad completos como "kilómetros" o "libras". El formato narrow usa visualización mínima con espaciado reducido o sin espaciado. El valor predeterminado es short cuando no especificas unitDisplay.
La configuración regional afecta cómo aparecen las unidades en forma larga. Los nombres de unidad completos 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 configuración regional proporciona la traducción apropiada y la forma gramatical para el nombre de la unidad.
Formatear 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 singular y plural según el valor. Una libra utiliza la forma singular mientras que diez libras utiliza la forma plural.
Formatear medidas de temperatura
Las medidas de temperatura utilizan identificadores de unidad como celsius y fahrenheit. Estas unidades se formatean con símbolos de grado en forma corta.
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 medidas de volumen
Las medidas 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 de 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 de 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 medidas de velocidad como millas por hora o kilómetros por hora utilizan unidades compuestas. Las medidas 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 que combina ambas partes de la unidad.
El formato largo muestra unidades compuestas con nombres completos y preposiciones apropiadas para 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);
// Output: Array of unit identifiers like:
// ["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 deseas 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);
// Output: true
console.log(hasPound);
// Output: true
Puedes verificar unidades específicas antes de crear formateadores para manejar entornos con diferentes niveles de compatibilidad.
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));
// Output: "5.12 km"
console.log(formatter.format(5.5));
// Output: "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));
// Output: "12,345.67 km"
Todas las funciones 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 usar 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));
// Output varies by user's locale
Este enfoque muestra las medidas según 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);
// Displays: "5.2 km" (or locale equivalent)
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.
Reutilización de formateadores de unidades
Crear una nueva instancia de Intl.NumberFormat implica cargar datos de configuración regional y procesar opciones. Cuando formateas múltiples mediciones 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));
});
// Output:
// "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 al formatear arrays o listas con muchas mediciones.