Cómo elegir entre 1K y 1 mil en formato compacto
Usa la opción compactDisplay para controlar si los números compactos se muestran como abreviaturas o palabras deletreadas
Introducción
Cuando formateas números grandes con notación compacta, el número 1500 se convierte en 1.5K de forma predeterminada. Este formato abreviado funciona bien en interfaces con espacio limitado como pantallas móviles y tarjetas de panel de control. Sin embargo, algunos contextos se benefician de deletrear la magnitud. El mismo número puede mostrarse como 1.5 mil en lugar de 1.5K, intercambiando brevedad por claridad.
El Intl.NumberFormat de JavaScript proporciona la opción compactDisplay para controlar esta elección. Puedes seleccionar entre visualización corta, que usa abreviaturas como K, M y B, o visualización larga, que deletrea la magnitud como mil, millón y mil millones. Esta opción te da control preciso sobre cómo aparecen los números compactos a los usuarios.
Qué controla la opción compactDisplay
La opción compactDisplay solo funciona cuando configuras notation como "compact". Acepta dos valores: "short" y "long". El valor short produce una salida abreviada como 1.5K, mientras que el valor long produce una salida deletreada como 1.5 mil.
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(shortFormatter.format(1500));
// Output: "1.5K"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// Output: "1.5 thousand"
La opción compactDisplay predetermina a "short" si la omites. Esto significa que la notación compacta usa abreviaturas a menos que solicites explícitamente visualización larga.
Formatear números con visualización compacta corta
La visualización compacta corta usa abreviaturas de una sola letra para representar la magnitud. Este formato minimiza el espacio horizontal mientras mantiene la legibilidad.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(formatter.format(1500));
// Output: "1.5K"
console.log(formatter.format(2400000));
// Output: "2.4M"
console.log(formatter.format(7800000000));
// Output: "7.8B"
console.log(formatter.format(5600000000000));
// Output: "5.6T"
El formateador selecciona automáticamente la abreviatura apropiada según la magnitud del número. Los miles usan K, los millones usan M, los mil millones usan B y los billones usan T.
La visualización corta funciona bien cuando necesitas ajustar números en espacios reducidos. Las interfaces móviles, tablas de datos, etiquetas de gráficos y tarjetas de panel de control se benefician del ancho compacto de los números abreviados.
Formatear números con visualización compacta larga
La visualización compacta larga deletrea la palabra de magnitud en lugar de abreviarla. Este formato proporciona más claridad a costa de espacio horizontal adicional.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(formatter.format(1500));
// Output: "1.5 thousand"
console.log(formatter.format(2400000));
// Output: "2.4 million"
console.log(formatter.format(7800000000));
// Output: "7.8 billion"
console.log(formatter.format(5600000000000));
// Output: "5.6 trillion"
El formateador utiliza la palabra de magnitud completa, haciendo que la escala del número sea inmediatamente obvia sin requerir que los usuarios interpreten abreviaturas. Los usuarios que no están familiarizados con la notación K, M, B encontrarán mil, millón, mil millones más accesible.
La visualización larga funciona bien en contextos donde la claridad importa más que el espacio. El contenido educativo, los informes financieros, las interfaces enfocadas en accesibilidad y la documentación formal se benefician de las magnitudes deletreadas.
Comparar visualización compacta corta y larga
La diferencia entre visualización corta y larga se vuelve clara cuando formateas los mismos números con ambas opciones.
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
const numbers = [1500, 45000, 2400000, 950000000];
numbers.forEach(num => {
console.log(`${num}:`);
console.log(` Short: ${shortFormatter.format(num)}`);
console.log(` Long: ${longFormatter.format(num)}`);
});
// Output:
// 1500:
// Short: 1.5K
// Long: 1.5 thousand
// 45000:
// Short: 45K
// Long: 45 thousand
// 2400000:
// Short: 2.4M
// Long: 2.4 million
// 950000000:
// Short: 950M
// Long: 950 million
La visualización corta utiliza consistentemente menos caracteres. La abreviatura K ocupa un carácter, mientras que mil ocupa tres caracteres. Esta diferencia se multiplica al mostrar muchos números en tablas o listas.
La visualización larga proporciona más contexto para cada número. Los usuarios pueden leer 2,4 millones sin necesidad de decodificar qué representa M. Esta explicitud ayuda a los usuarios que están menos familiarizados con formatos de números abreviados.
Cómo varía la visualización compacta entre idiomas
Tanto la visualización compacta corta como la larga se adaptan a la configuración regional que especifiques. Diferentes idiomas utilizan diferentes abreviaturas y palabras de magnitud.
const locales = ["en-US", "fr-FR", "de-DE", "es-ES"];
locales.forEach(locale => {
const shortFormatter = new Intl.NumberFormat(locale, {
notation: "compact",
compactDisplay: "short"
});
const longFormatter = new Intl.NumberFormat(locale, {
notation: "compact",
compactDisplay: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(2400000)}`);
console.log(` Long: ${longFormatter.format(2400000)}`);
});
// Output:
// en-US:
// Short: 2.4M
// Long: 2.4 million
// fr-FR:
// Short: 2,4 M
// Long: 2,4 millions
// de-DE:
// Short: 2,4 Mio.
// Long: 2,4 Millionen
// es-ES:
// Short: 2,4 M
// Long: 2,4 millones
El francés añade una s para hacer millones plural. El alemán utiliza Mio. como forma corta y Millionen como forma larga. El español utiliza millones para el plural. Cada idioma aplica sus propias reglas gramaticales tanto a los formatos cortos como largos.
El formateador maneja estas variaciones automáticamente según la configuración regional. No necesitas mantener lógica de formateo separada para cada idioma.
Los idiomas asiáticos a menudo utilizan sistemas de agrupación de números completamente diferentes.
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact",
compactDisplay: "short"
});
console.log(jaFormatter.format(15000000));
// Output: "1500万"
const zhFormatter = new Intl.NumberFormat("zh-CN", {
notation: "compact",
compactDisplay: "short"
});
console.log(zhFormatter.format(15000000));
// Output: "1500万"
El japonés y el chino agrupan por diez mil en lugar de mil. El carácter 万 representa diez mil, por lo que 15 000 000 se convierte en 1500万 en lugar de 15M. La API Intl maneja estas diferencias fundamentales en los sistemas numéricos automáticamente.
Cuándo usar la visualización compacta corta
La visualización compacta corta funciona mejor en contextos con restricciones de espacio donde cada carácter importa. Las interfaces móviles tienen un espacio horizontal limitado, lo que hace que los números abreviados sean esenciales para ajustar el contenido en pantalla.
Las tablas de datos que muestran múltiples números se benefician de un ancho uniforme. Usar 1,5K, 2,4M y 7,8B mantiene las columnas alineadas y evita el ajuste de línea. El formato de abreviación consistente ayuda a los usuarios a escanear columnas de números rápidamente.
Las tarjetas de panel de control y los paneles de métricas utilizan la visualización corta para maximizar la densidad de información. Un panel que muestra recuentos de seguidores, recuentos de visualizaciones y métricas de interacción en múltiples plataformas necesita un formato compacto para ajustar todas las métricas en pantalla simultáneamente.
Los ejes y etiquetas de gráficos requieren texto mínimo para evitar superposiciones o aglomeraciones. Usar 1,5M en lugar de 1,5 millones mantiene las etiquetas de los ejes legibles sin necesidad de rotarlas o truncarlas.
Los mapas interactivos y las visualizaciones de datos se benefician de la visualización corta al mostrar números como superposiciones o información sobre herramientas. El formato abreviado evita que el texto oculte el contenido subyacente.
Cuándo usar la visualización compacta larga
La visualización compacta larga funciona mejor cuando la claridad y la accesibilidad importan más que la eficiencia del espacio. El contenido educativo que enseña a los usuarios sobre números grandes se beneficia de escribir las magnitudes completas. Los estudiantes que aprenden sobre estadísticas de población o cifras económicas necesitan palabras de magnitud explícitas para comprender la escala.
Los informes financieros y documentos formales utilizan la visualización larga para evitar ambigüedades. Un informe empresarial que indica 2,4 millones en ingresos es más claro que 2,4M, especialmente para lectores que podrían no estar familiarizados con las convenciones de abreviación.
Las interfaces centradas en accesibilidad se benefician de la visualización larga porque los lectores de pantalla pronuncian las palabras deletreadas de forma más natural. Un lector de pantalla que anuncia 1,5 mil suena más natural que 1,5K, que podría leerse como uno punto cinco ka o uno punto cinco K.
Los diseños impresos tienen más espacio horizontal que las interfaces digitales, lo que hace práctica la visualización larga. Los informes impresos, infografías y presentaciones pueden acomodar los caracteres adicionales sin causar problemas de diseño.
Los contextos donde los usuarios pueden no estar familiarizados con las abreviaturas necesitan visualización larga. Las audiencias internacionales, usuarios no técnicos o usuarios con menor alfabetización digital encuentran mil, millón y mil millones más reconocibles que K, M y B.
Combina la visualización compacta con otras opciones de formato
La opción compactDisplay funciona con todas las demás opciones de formato de números. Puedes controlar los decimales, la agrupación y otros formatos mientras eliges entre visualización corta y larga.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
maximumFractionDigits: 2
});
console.log(formatter.format(1234567));
// Output: "1.23 million"
console.log(formatter.format(9876543));
// Output: "9.88 million"
La opción maximumFractionDigits controla la precisión decimal mientras que compactDisplay controla el formato de magnitud. Estas opciones funcionan juntas para producir el formato exacto que necesitas.
Puedes combinar la visualización compacta con el formato de moneda para mostrar cantidades monetarias con magnitudes deletreadas.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
notation: "compact",
compactDisplay: "long"
});
console.log(formatter.format(2400000));
// Output: "$2.4 million"
console.log(formatter.format(750000));
// Output: "$750 thousand"
Este formato funciona bien para mostrar valores monetarios grandes en informes financieros o resúmenes de presupuesto donde tanto el símbolo de moneda como la magnitud deletreada proporcionan claridad.
La visualización compacta también funciona con la visualización de signos para mostrar cambios o deltas.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
signDisplay: "always"
});
console.log(formatter.format(1500000));
// Output: "+1.5 million"
console.log(formatter.format(-850000));
// Output: "-850 thousand"
La combinación de signos explícitos y magnitudes deletreadas hace que los cambios sean inmediatamente claros para los usuarios.
Qué recordar
La opción compactDisplay controla si la notación compacta usa abreviaturas o palabras deletreadas. Establécela en "short" para salida abreviada como 1,5K, o "long" para salida deletreada como 1,5 mil. La opción tiene como valor predeterminado "short" si se omite.
Usa la visualización corta cuando el espacio es limitado o al mostrar muchos números que necesitan un ancho consistente. Usa la visualización larga cuando la claridad y la accesibilidad importan más que la eficiencia del espacio. El formateador maneja las variaciones específicas de la configuración regional automáticamente tanto para formatos cortos como largos.
Combina compactDisplay con otras opciones de formato como decimales, moneda y visualización de signo para crear el formato de número exacto que tu aplicación necesita.