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 formato, mientras que 1,5M transmite la misma magnitud en tres caracteres. Esta representación compacta es común en contadores de seguidores en redes sociales, contadores de visualizaciones de vídeos, métricas de paneles de control y tamaños de archivos.

JavaScript proporciona soporte integrado para el formato compacto de números 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 números compactos más rápido. El cerebro humano reconoce 1,5M como un millón y medio más rápidamente que 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 precisión con legibilidad.

Diferentes contextos requieren diferentes niveles de precisión. Un contador de seguidores en redes sociales rara vez necesita números exactos. Mostrar 1,2M seguidores en lugar de 1.234.567 proporciona información suficiente. Un panel de control 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.

Uso de notación compacta en JavaScript

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

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

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

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

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

El formateador elige automáticamente el indicador de magnitud apropiado según el tamaño del número. Los miles se convierten en K, los millones en M y los miles de millones 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 según la magnitud del número.

Cómo la notación compacta formatea diferentes magnitudes

La notación compacta aplica diferentes formatos en diferentes escalas. Comprender 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 mil, cambia a notación K. El mismo patrón continúa para millones, miles de millones y billones.

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 notación compacta.

Elegir entre visualización corta y larga

La notación compacta ofrece dos estilos de visualización. El estilo corto usa 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 panel de control, 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 enfocadas en accesibilidad se benefician de escribir la magnitud completa.

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

La notación compacta se adapta al idioma y la región especificados en la configuración regional. Diferentes idiomas utilizan diferentes 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 usa M con un espacio antes. El alemán usa Mio. como abreviatura de Million. El japonés usa un sistema numérico completamente diferente con 万 que representa diez mil.

Estas diferencias ocurren automáticamente según la configuración regional. No necesitas escribir código específico para cada configuración regional para manejar diferentes indicadores de magnitud. Pasa la preferencia de idioma del usuario al formateador y este produce 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 usa 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.

Cuándo 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 normalmente 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 notación compacta cuando mejora la legibilidad.

El umbral no siempre es mil. Algunos idiomas, como el japonés, usan diferentes sistemas de agrupación numérica. 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.

Combinar 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 usas 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 garantizar 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 garantiza 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, las métricas de paneles de control y las estadísticas resumidas son casos de uso ideales. Los usuarios no necesitan saber que un vídeo tiene exactamente 1 234 567 visualizaciones. Saber que tiene 1,2 M de visualizaciones proporciona información suficiente.

No uses la notación compacta cuando los números exactos importen. Las transacciones financieras, las mediciones científicas y los documentos legales requieren precisión completa. El saldo de un banco debe mostrar 1234,56 $, no 1,2 K $. Una factura debe mostrar 1500,00 $, no 1,5 K $.

Considera tu audiencia y contexto. Los analistas de datos podrían preferir ver números completos para comprender valores exactos. Los consumidores generales suelen preferir 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 suelen usar 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.