Как управлять отображением разделителей тысяч?

Введение

При форматировании числа 123456 вы можете увидеть "123,456" с запятой, разделяющей тысячи, или "123456" без какого-либо разделителя. Символ, который разделяет группы цифр, называется разделителем групп, в англоязычных регионах его часто называют разделителем тысяч.

Разные контексты требуют разного форматирования. В финансовых отчетах обычно используются разделители групп, чтобы облегчить чтение больших чисел. В технических отображениях, таких как серийные номера, коды продуктов и идентификационные номера, их обычно опускают, чтобы избежать путаницы. Опция useGrouping в Intl.NumberFormat управляет тем, будут ли эти разделители отображаться в отформатированном выводе.

В этом руководстве объясняется, как включать и отключать разделители групп, как они различаются в разных локалях и когда использовать каждую настройку в ваших приложениях.

Отключение разделителей групп с помощью useGrouping false

Установите useGrouping в значение false, чтобы удалить все разделители групп из отформатированных чисел.

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

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

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

Отформатированный вывод не содержит запятых или других символов разделения групп, независимо от того, насколько велико число. Десятичный разделитель остается, так как useGrouping влияет только на группировку цифр, а не на форматирование десятичных чисел.

Это применимо ко всем стилям чисел, включая валюту и единицы измерения.

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 км"

Символ валюты и метка единицы измерения отображаются нормально, но цифры не имеют внутренних разделителей.

Включение разделителей групп с помощью useGrouping true

Установите useGrouping в значение true, чтобы включить разделители групп. Это поведение по умолчанию, поэтому вам нужно указывать его явно только в тех случаях, когда вы хотите подчеркнуть свое намерение или переопределить конфигурацию.

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

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

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

Форматировщик вставляет запятые каждые три цифры, следуя английским стандартам. Это делает большие числа более удобными для визуального восприятия.

Поскольку true является значением по умолчанию, эти два форматировщика эквивалентны.

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

Оба форматировщика включают разделители групп в своем выводе.

Понимание различий в группировке между локалями

Разные локали используют разные символы для группировки и следуют различным схемам группировки. Опция useGrouping управляет тем, будет ли происходить группировка, а локаль определяет, какой символ используется и где он появляется.

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"

Английский использует запятые, немецкий — точки, а французский — пробелы. Все три являются разделителями группировки, но выглядят по-разному, так как следуют правилам своей локали.

Некоторые локали используют разные схемы группировки. Индийская система нумерации группирует первые три цифры, а затем каждые две цифры.

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

Разделитель группировки появляется после первых трёх цифр справа, а затем после каждых двух цифр, что даёт 12,34,567 вместо 1,234,567.

Когда вы отключаете группировку с помощью useGrouping: false, эти различия между локалями исчезают, так как разделители вообще не появляются.

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

Использование строковых значений для расширенного управления группировкой

Опция useGrouping принимает строковые значения, которые обеспечивают более тонкий контроль над тем, когда появляются разделители группировки. Эти значения являются частью спецификации Intl.NumberFormat V3 и поддерживаются современными браузерами.

Значение "always" эквивалентно true и всегда отображает разделители группировки.

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

Значение "auto" следует предпочтениям локали для группировки. Большинство локалей предпочитают показывать разделители группировки, что делает "auto" на практике похожим на "always". Это значение по умолчанию, если notation не равно "compact".

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

Значение "min2" показывает разделители группировки только тогда, когда в первой группе есть как минимум две цифры. Для четырёхзначных чисел это означает, что разделитель не появляется.

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

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

Число 1234 имеет только одну цифру в первой группе (это 1), поэтому разделитель не появляется. Число 12345 имеет две цифры в первой группе (это 12), поэтому разделитель появляется.

Это поведение соответствует тому, как некоторые локали естественно форматируют числа. Например, в испанском языке обычно опускаются разделители группировки для четырёхзначных чисел.

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

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

Значение "auto" учитывает эти предпочтения локали, в то время как "always" их переопределяет.

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

Выберите, когда отключать разделители группировки

Отключайте разделители группировки в тех случаях, когда число представляет собой код, идентификатор или техническое значение, а не количество.

Серийные номера и коды продуктов не должны содержать разделителей группировки.

const serialNumber = 1234567890;

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

Это предотвращает путаницу относительно того, является ли разделитель частью фактического значения. Пользователь, видя 1,234,567,890, может задаться вопросом, имеют ли запятые значение или их нужно вводить при вводе числа в другом месте.

Почтовые индексы, номера телефонов (когда они представлены как простые числа) и другие идентификаторы фиксированного формата выигрывают от отключения группировки.

const zipCode = 90210;

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

Технические отображения, показывающие необработанные значения для отладки или ведения журнала, обычно отключают группировку, чтобы показать точное числовое представление.

console.log(`Обработка ${
  new Intl.NumberFormat('en-US', {
    useGrouping: false
  }).format(bytesProcessed)
} байт`);
// "Обработка 1234567 байт"

Поле ввода для числовых значений часто отключает группировку во время редактирования, чтобы избежать путаницы относительно того, нужно ли пользователю вводить разделители. Отформатированное отображение может показывать группировку после завершения ввода значения пользователем.

Выберите, когда включать разделители группировки

Включайте разделители группировки для чисел, которые представляют количества, измерения или суммы, которые пользователям нужно быстро прочитать и понять.

Финансовые суммы легче воспринимаются с разделителями группировки.

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

Разделители помогают пользователям быстро различать $1,234,567 и $123,456 с первого взгляда.

Статистические данные, аналитические панели и отчеты, отображающие подсчеты, выигрывают от группировки.

const pageViews = 5432198;

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(pageViews);
// "5,432,198 просмотров"

Крупные измерения становятся более читаемыми с группировкой.

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

Это расстояние (приблизительное расстояние до Луны) легче читать как 384,400, чем как 384400.

Любой контекст, в котором пользователю нужно понять величину числа, выигрывает от разделителей группировки. Разделители создают визуальные ориентиры, которые помогают мозгу обрабатывать цифры блоками.

Используйте min2 для более аккуратного отображения четырехзначных чисел

Значение "min2" обеспечивает более аккуратный вид для чисел, которые могут быть четырех- или пятизначными. Например, годы обычно выглядят лучше без разделителей.

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

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

Большинство читателей воспринимают 2025 как более естественное, чем 2,025, при упоминании года. Настройка "min2" обеспечивает такое поведение автоматически.

Цены в определенных диапазонах также выигрывают от этого подхода.

const price = 1299;

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

Некоторые ритейлеры предпочитают отображать цены как $1299 без запятой, чтобы они психологически казались менее дорогими. Как только цены превышают четыре цифры, разделитель появляется.

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

Это обеспечивает единообразное поведение в вашем ценовом диапазоне без необходимости вручную проверять величину числа.

Поймите, как компактная нотация влияет на группировку

При использовании компактной нотации поведение по умолчанию для useGrouping изменяется на "min2" вместо "auto". Это предотвращает ненужные разделители в компактных форматах.

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

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

Компактная нотация уже сокращает число, поэтому внутренние разделители группировки были бы избыточными. Форматтер обрабатывает это автоматически, но вы можете переопределить это при необходимости.

Проверьте, какая настройка группировки активна

Метод resolvedOptions() показывает, какое значение useGrouping фактически использует форматтер.

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

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

Хотя форматтер был создан без явной установки useGrouping, разрешенные параметры показывают значение по умолчанию "auto".

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

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

Форматтер с компактной нотацией по умолчанию использует "min2" вместо "auto", как показано в разрешенных параметрах.

Этот метод помогает отлаживать неожиданное поведение группировки, показывая фактическую настройку, которую использует форматтер.