Cómo formatear números como 1K, 1M, 1B

Introducción

Los números grandes ocupan un espacio significativo y son difíciles de escanear rápidamente. Un número como 1,500,000 requiere siete dígitos más el formato, mientras que 1.5M transmite la misma magnitud en tres caracteres. Esta representación compacta es común en los contadores de seguidores en redes sociales, contadores de visualizaciones de videos, métricas de paneles de control y tamaños de archivos.

JavaScript proporciona soporte integrado para el formato de números compactos a través de la API Intl.NumberFormat. Esta API maneja la conversión automáticamente y adapta el formato a diferentes idiomas y regiones, asegurando que tus números se muestren correctamente para todos los usuarios.

Por qué los números grandes necesitan formato compacto

Cuando muestras números grandes en interfaces de usuario, surgen dos problemas. Primero, los números consumen espacio horizontal. Un contador que muestra 1,234,567 visualizaciones requiere más espacio que uno que muestra 1.2M visualizaciones. Segundo, los usuarios procesan los números compactos más rápido. El cerebro humano reconoce 1.5M como un millón y medio más rápidamente que al analizar 1,500,000.

La notación compacta resuelve ambos problemas reemplazando los ceros finales con indicadores de magnitud. En lugar de mostrar todos los dígitos, muestra solo las cifras significativas seguidas de una letra que representa la magnitud. Este enfoque equilibra la precisión con la legibilidad.

Diferentes contextos requieren diferentes niveles de precisión. Un contador de seguidores en redes sociales raramente necesita números exactos. Mostrar 1.2M seguidores en lugar de 1,234,567 proporciona información suficiente. Un panel financiero podría necesitar más precisión, mostrando 1.23M en lugar de 1.2M. La API Intl te permite controlar esta precisión mientras mantienes el formato compacto.

Usando notación compacta en JavaScript

La opción notation en Intl.NumberFormat controla cómo se representan los números. Establecerla como "compact" habilita el formato compacto.

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

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

console.log(formatter.format(1500000));
// Resultado: "1.5M"

console.log(formatter.format(1500000000));
// Resultado: "1.5B"

El formateador elige automáticamente el indicador de magnitud apropiado basado en el tamaño del número. Los miles se convierten en K, los millones en M y los billones en B. El formateador también reduce el número a una cifra legible, mostrando 1.5K en lugar de 1.5 mil.

No necesitas escribir lógica para determinar cuándo usar K, M o B. La API Intl maneja esta decisión basándose en la magnitud del número.

Cómo la notación compacta formatea diferentes magnitudes

La notación compacta aplica diferentes formatos a diferentes escalas. Entender estos umbrales te ayuda a predecir cómo se mostrarán tus números.

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

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

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

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

console.log(formatter.format(999000));
// Output: "999K"

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

console.log(formatter.format(1500000));
// Output: "1.5M"

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

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

Los números por debajo de mil se muestran sin compactación. Una vez que un número alcanza los mil, cambia a la notación K. El mismo patrón continúa para millones, billones y trillones.

El formateador redondea los números para ajustarse a la representación compacta. Un número como 1.234.567 se convierte en 1.2M por defecto. La siguiente lección cubrirá cómo controlar el número de decimales mostrados en la notación compacta.

Elegir entre visualización corta y larga

La notación compacta ofrece dos estilos de visualización. El estilo corto utiliza letras como K, M y B. El estilo largo escribe la magnitud como una palabra.

const shortFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "short"
});

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

console.log(shortFormatter.format(1500000));
// Output: "1.5M"

const longFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(longFormatter.format(1500));
// Output: "1.5 thousand"

console.log(longFormatter.format(1500000));
// Output: "1.5 million"

La opción compactDisplay controla este comportamiento. Acepta dos valores: "short" y "long". Si omites esta opción, por defecto es "short".

La visualización corta funciona bien cuando el espacio es limitado. Las tarjetas de dashboard, interfaces móviles y tablas de datos se benefician de la brevedad de K, M y B. La visualización larga funciona mejor cuando la claridad importa más que el espacio. El contenido educativo, informes financieros e interfaces centradas en la accesibilidad se benefician de deletrear la magnitud.

Cómo funciona la notación compacta en diferentes idiomas

La notación compacta se adapta al idioma y región especificados en la configuración regional. Diferentes idiomas utilizan distintas letras, palabras y convenciones de formato para los indicadores de magnitud.

const enFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact"
});

console.log(enFormatter.format(1500000));
// Output: "1.5M"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  notation: "compact"
});

console.log(frFormatter.format(1500000));
// Output: "1,5 M"

const deFormatter = new Intl.NumberFormat("de-DE", {
  notation: "compact"
});

console.log(deFormatter.format(1500000));
// Output: "1,5 Mio."

const jaFormatter = new Intl.NumberFormat("ja-JP", {
  notation: "compact"
});

console.log(jaFormatter.format(15000000));
// Output: "1500万"

El francés utiliza M con un espacio antes. El alemán usa Mio. como abreviatura de Million. El japonés utiliza un sistema numérico completamente diferente con 万 representando diez mil.

Estas diferencias ocurren automáticamente según la configuración regional. No es necesario escribir código específico para cada idioma para manejar diferentes indicadores de magnitud. Pasa la preferencia de idioma del usuario al formateador, y este producirá la salida correcta para ese idioma.

La visualización larga también se adapta a cada idioma.

const enFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(enFormatter.format(1500000));
// Output: "1.5 million"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(frFormatter.format(1500000));
// Output: "1,5 million"

const deFormatter = new Intl.NumberFormat("de-DE", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(deFormatter.format(1500000));
// Output: "1,5 Millionen"

El alemán utiliza Millionen para la forma plural de millón. El francés usa million sin s. La API Intl maneja estas variaciones lingüísticas por ti.

Cuando los números pequeños no se compactan

Los números por debajo del umbral de compactación se muestran normalmente. Este umbral varía según la configuración regional, pero típicamente comienza en mil en la mayoría de los idiomas occidentales.

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

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

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

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

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

Este comportamiento evita un formato incómodo para números pequeños. Mostrar 500 como 500 es más claro que mostrarlo como 0.5K. El formateador solo aplica la notación compacta cuando mejora la legibilidad.

El umbral no siempre es mil. Algunos idiomas, como el japonés, utilizan diferentes sistemas de agrupación de números. El japonés agrupa por diez mil, por lo que la notación compacta podría comenzar en un umbral diferente.

const jaFormatter = new Intl.NumberFormat("ja-JP", {
  notation: "compact"
});

console.log(jaFormatter.format(9999));
// Output: "9999"

console.log(jaFormatter.format(10000));
// Output: "1万"

La API Intl maneja estos umbrales específicos de cada configuración regional automáticamente.

Combinando la notación compacta con otras opciones de formato

La notación compacta funciona con otras opciones de formato de números. Puedes controlar los decimales, los separadores de agrupación y el redondeo mientras utilizas la notación compacta.

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 1
});

console.log(formatter.format(1234567));
// Output: "1.2M"

const preciseFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 2
});

console.log(preciseFormatter.format(1234567));
// Output: "1.23M"

const noDecimalsFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 0
});

console.log(noDecimalsFormatter.format(1234567));
// Output: "1M"

La opción maximumFractionDigits controla cuántos decimales aparecen después del número entero. Establecerla en 0 elimina todos los decimales, haciendo el número aún más compacto.

También puedes combinar la notación compacta con opciones de dígitos mínimos para asegurar un formato consistente en un rango de números.

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(1000));
// Output: "1.0K"

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

console.log(formatter.format(2000));
// Output: "2.0K"

Este enfoque asegura que todos los números muestren un decimal, lo que ayuda a mantener la consistencia visual en tablas y gráficos.

Cuándo usar la notación compacta

La notación compacta funciona mejor cuando el espacio es limitado o cuando la precisión exacta no es crítica. Los contadores de redes sociales, métricas de paneles de control y estadísticas resumidas son casos de uso ideales. Los usuarios no necesitan saber que un video tiene exactamente 1.234.567 visualizaciones. Saber que tiene 1,2M de visualizaciones proporciona información suficiente.

No uses la notación compacta cuando los números exactos importan. Las transacciones financieras, mediciones científicas y documentos legales requieren precisión completa. Un saldo bancario debe mostrar $1.234,56, no $1,2K. Una factura debe mostrar $1.500,00, no $1,5K.

Considera tu audiencia y contexto. Los analistas de datos podrían preferir ver números completos para entender valores exactos. Los consumidores generales a menudo prefieren números compactos porque los procesan más rápido. Algunas interfaces ofrecen ambas opciones, mostrando números compactos por defecto con una forma de revelar números exactos bajo demanda.

La notación compacta también funciona bien para tamaños de archivo, aunque la implementación difiere ligeramente. Los tamaños de archivo típicamente usan potencias de 1024 en lugar de 1000, resultando en kibibytes y mebibytes en lugar de kilobytes y megabytes. La API Intl no maneja unidades binarias, por lo que el formato de tamaño de archivo requiere lógica personalizada o una biblioteca dedicada.