¿Cómo controlas si se muestran los separadores de miles?

Introducción

Cuando formateas el número 123456, podrías ver "123,456" con una coma separando los miles, o "123456" sin ningún separador. El carácter que separa grupos de dígitos se llama separador de agrupación, comúnmente conocido como separador de miles en regiones de habla inglesa.

Diferentes contextos requieren diferentes formatos. Los informes financieros típicamente muestran separadores de agrupación para hacer que los números grandes sean más fáciles de leer. Las visualizaciones técnicas como números de serie, códigos de producto y números de identificación típicamente los omiten para evitar confusión. La opción useGrouping en Intl.NumberFormat controla si estos separadores aparecen en la salida formateada.

Esta guía explica cómo habilitar y deshabilitar los separadores de agrupación, cómo varían entre locales y cuándo usar cada configuración en tus aplicaciones.

Deshabilitar separadores de agrupación con useGrouping false

Establece useGrouping en false para eliminar todos los separadores de agrupación de los números formateados.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: false
});

formatter.format(123456);
// "123456"

formatter.format(1234567.89);
// "1234567.89"

La salida formateada no contiene comas ni otros caracteres de agrupación, independientemente de cuán grande sea el número. El separador decimal permanece porque useGrouping solo afecta la agrupación de dígitos, no el formato decimal.

Esto se aplica a todos los estilos de números, incluidas monedas y unidades.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: false
}).format(1234567.89);
// "$1234567.89"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: false
}).format(50000);
// "50000 km"

El símbolo de moneda y la etiqueta de unidad aparecen normalmente, pero los dígitos no tienen separadores internos.

Habilitar separadores de agrupación con useGrouping true

Establece useGrouping en true para incluir separadores de agrupación. Este es el comportamiento predeterminado, por lo que solo necesitas especificarlo explícitamente cuando quieras ser claro sobre tu intención o cuando sobrescribas una configuración.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: true
});

formatter.format(123456);
// "123,456"

formatter.format(1234567.89);
// "1,234,567.89"

El formateador inserta comas cada tres dígitos, siguiendo las convenciones del inglés. Esto hace que los números grandes sean más fáciles de leer visualmente.

Dado que true es el valor predeterminado, estos dos formateadores son equivalentes.

new Intl.NumberFormat('en-US', { useGrouping: true });
new Intl.NumberFormat('en-US');

Ambos formateadores incluyen separadores de agrupación en su salida.

Comprender cómo varía la agrupación entre locales

Diferentes locales utilizan diferentes caracteres para la agrupación y siguen diferentes patrones de agrupación. La opción useGrouping controla si se produce la agrupación, mientras que el locale determina qué carácter aparece y dónde.

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(1234567);
// "1,234,567"

new Intl.NumberFormat('de-DE', {
  useGrouping: true
}).format(1234567);
// "1.234.567"

new Intl.NumberFormat('fr-FR', {
  useGrouping: true
}).format(1234567);
// "1 234 567"

El inglés utiliza comas, el alemán utiliza puntos y el francés utiliza espacios. Los tres son separadores de agrupación, pero se ven diferentes porque siguen las convenciones de su locale.

Algunos locales utilizan diferentes patrones de agrupación. La numeración india agrupa los primeros tres dígitos y luego agrupa cada dos dígitos después de eso.

new Intl.NumberFormat('en-IN', {
  useGrouping: true
}).format(1234567);
// "12,34,567"

El separador de agrupación aparece después de tres dígitos desde la derecha, luego después de cada dos dígitos, produciendo 12,34,567 en lugar de 1,234,567.

Cuando deshabilitas la agrupación con useGrouping: false, estas diferencias específicas del locale desaparecen porque no aparece ningún separador.

new Intl.NumberFormat('en-IN', {
  useGrouping: false
}).format(1234567);
// "1234567"

Usar valores de cadena para control avanzado de agrupación

La opción useGrouping acepta valores de cadena que proporcionan un control más preciso sobre cuándo aparecen los separadores de agrupación. Estos valores son parte de la especificación Intl.NumberFormat V3 y son compatibles con navegadores modernos.

El valor "always" es equivalente a true y siempre muestra separadores de agrupación.

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(1234);
// "1,234"

El valor "auto" sigue las preferencias del locale para la agrupación. La mayoría de los locales prefieren mostrar separadores de agrupación, lo que hace que "auto" sea similar a "always" en la práctica. Este es el valor predeterminado cuando notation no es "compact".

new Intl.NumberFormat('en-US', {
  useGrouping: 'auto'
}).format(1234);
// "1,234"

El valor "min2" solo muestra separadores de agrupación cuando hay al menos dos dígitos en el primer grupo. Para números de cuatro dígitos, esto significa que no aparece ningún separador.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(1234);
// "1234"

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(12345);
// "12,345"

El número 1234 tiene solo un dígito en el primer grupo (el 1), por lo que no aparece ningún separador. El número 12345 tiene dos dígitos en el primer grupo (el 12), por lo que aparece el separador.

Este comportamiento coincide con la forma en que algunos locales formatean naturalmente los números. El español, por ejemplo, normalmente omite los separadores de agrupación para números de cuatro dígitos.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(1234);
// "1234"

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(12345);
// "12.345"

El valor "auto" respeta estas preferencias del locale, mientras que "always" las anula.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'always'
}).format(1234);
// "1.234"

Elige cuándo desactivar los separadores de agrupación

Desactiva los separadores de agrupación en contextos donde el número representa un código, identificador o valor técnico en lugar de una cantidad.

Los números de serie y códigos de producto no deben tener separadores de agrupación.

const serialNumber = 1234567890;

new Intl.NumberFormat('en-US', {
  useGrouping: false
}).format(serialNumber);
// "1234567890"

Esto evita confusión sobre si el separador es parte del valor real. Un usuario que vea 1,234,567,890 podría preguntarse si las comas son significativas o si debe escribirlas al introducir el número en otro lugar.

Los códigos postales, números de teléfono (cuando se formatean como números simples) y otros identificadores de formato fijo se benefician de la desactivación de la agrupación.

const zipCode = 90210;

new Intl.NumberFormat('en-US', {
  useGrouping: false,
  minimumIntegerDigits: 5
}).format(zipCode);
// "90210"

Las visualizaciones técnicas que muestran valores sin procesar para depuración o registro normalmente deben desactivar la agrupación para mostrar la representación numérica exacta.

console.log(`Processing ${
  new Intl.NumberFormat('en-US', {
    useGrouping: false
  }).format(bytesProcessed)
} bytes`);
// "Processing 1234567 bytes"

Los campos de entrada de formularios para valores numéricos a menudo desactivan la agrupación durante la edición para evitar confusión sobre si el usuario debe escribir los separadores. La visualización formateada puede mostrar la agrupación después de que el usuario termine de introducir el valor.

Elige cuándo activar los separadores de agrupación

Activa los separadores de agrupación para números que representan cantidades, medidas o importes que los usuarios necesitan leer y comprender rápidamente.

Los importes financieros son más fáciles de escanear con separadores de agrupación.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: true
}).format(1234567.89);
// "$1,234,567.89"

Los separadores ayudan a los usuarios a distinguir rápidamente entre $1,234,567 y $123,456 de un vistazo.

Los datos estadísticos, paneles de análisis e informes que muestran recuentos se benefician del agrupamiento.

const pageViews = 5432198;

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(pageViews);
// "5,432,198 views"

Las mediciones grandes se vuelven más legibles con el agrupamiento.

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: true
}).format(384400);
// "384,400 km"

Esta distancia (la distancia aproximada a la luna) es más fácil de leer como 384,400 que como 384400.

Cualquier contexto en el que el usuario necesite comprender la magnitud de un número se beneficia de los separadores de agrupamiento. Los separadores crean puntos de referencia visuales que ayudan al cerebro a procesar los dígitos en bloques.

Usa min2 para visualizaciones más limpias de números de cuatro dígitos

El valor "min2" proporciona un aspecto más limpio para números que pueden tener cuatro o cinco dígitos. Los números de año, por ejemplo, suelen verse mejor sin separadores.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(2025);
// "2025"

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(2025);
// "2,025"

La mayoría de los lectores encuentran 2025 más natural que 2,025 al referirse a un año. La configuración "min2" proporciona este comportamiento automáticamente.

Los precios en ciertos rangos también se benefician de este enfoque.

const price = 1299;

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(price);
// "$1299.00"

Algunos minoristas prefieren mostrar precios como $1299 sin coma para que parezcan psicológicamente menos costosos. Una vez que los precios superan los cuatro dígitos, aparece el separador.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(12999);
// "$12,999.00"

Esto te proporciona un comportamiento consistente en todo tu rango de precios sin verificar manualmente la magnitud del número.

Comprende cómo la notación compacta afecta al agrupamiento

Al usar notación compacta, el comportamiento predeterminado de useGrouping cambia a "min2" en lugar de "auto". Esto evita separadores innecesarios en formatos compactos.

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(1234);
// "1.2K"

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  useGrouping: 'always'
}).format(1234);
// "1.2K"

La notación compacta ya abrevia el número, por lo que los separadores de agrupamiento internos serían redundantes. El formateador maneja esto automáticamente, pero puedes anularlo si es necesario.

Verifica qué configuración de agrupamiento está activa

El método resolvedOptions() muestra qué valor de useGrouping utiliza realmente el formateador.

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

formatter.resolvedOptions().useGrouping;
// "auto"

Aunque el formateador se creó sin establecer explícitamente useGrouping, las opciones resueltas muestran el valor predeterminado de "auto".

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

compactFormatter.resolvedOptions().useGrouping;
// "min2"

El formateador de notación compacta utiliza por defecto "min2" en lugar de "auto", como se muestra en las opciones resueltas.

Este método ayuda a depurar comportamientos inesperados de agrupación al revelar la configuración real que utiliza el formateador.