Форматирование чисел через Intl.NumberFormat позволяет получать корректные числовые строки с разделителями тысяч, десятичными точками и валютами в зависимости от локали. Это стандартный способ работы с числами в JavaScript, который учитывает региональные особенности отображения.
Форматирование чисел через Intl.NumberFormat: базовый принцип и структура объекта
Объект Intl.NumberFormat является частью глобального объекта Intl, который предоставляет доступ к локализованным функциям форматирования. Для создания экземпляра используется конструктор NumberFormat с первым аргументом — кодом локали (locale) и вторым — объектом опций.
Структура объекта позволяет гибко настраивать вывод: определять разделитель тысяч, количество знаков после запятой, символ валюты и способ отображения отрицательных чисел. Результатом работы является строка, готовая к выводу в интерфейсе или логам.
Пример базового использования: создание объекта с русской локалью и форматирование числа 1234567.89.
Выбор локали (locale): как определить код региона для нужного формата
Локаль определяет правила форматирования: разделитель тысяч, десятичный разделитель и символ валюты. Код локали состоит из кода языка и опционально — кода региона, например 'ru-RU' или 'en-US'.
Для русского языка используется 'ru', для американского английского — 'en-US'. Различия проявляются в выборе разделителя тысяч (пробел, запятая или точка) и десятичного разделителя (точка или запятая).
При работе с несколькими регионами можно передавать массив кодов локали, например ['ru-RU', 'de-DE'], чтобы попытаться использовать первый доступный вариант. Если первый не поддерживается, браузер переключится на следующий.
Настройка разделителя тысяч и десятичной точки: опции minimumFractionDigits, maximumFractionDigits
Параметры minimumFractionDigits и maximumFractionDigits задают минимальное и максимальное количество знаков после запятой. Если указать 0, дробная часть не выводится; если указать больше фактического количества цифр, добавляются нули.
Пример: число 1234567 с minimumFractionDigits=2 и maximumFractionDigits=2 даст результат '1 234 567,00'. Если установить maximumFractionDigits=0, получится '1 234 567'.
Эти параметры полезны при отображении цен, где всегда требуется два знака после запятой, или при показе целых чисел без дробной части.
Управление группировкой цифр: параметр useGrouping и его влияние на вывод
Параметр useGrouping управляет отображением разделителей тысяч. Если установить false, разделители не добавляются, что полезно для технических отчетов или сравнения чисел.
Пример: число 1234567 с useGrouping=false даст '1234567', а с true — '1 234 567'.
В некоторых случаях, например при передаче данных через API, отключение группировки упрощает парсинг и обработку числовых значений.
Работа с валютами: специфика currency и символы валют в разных локалях
Для форматирования валют используется опция style='currency' и параметр currency, указывающий код валюты (например, 'RUB', 'USD'). Символ валюты берется из выбранной локали.
В русской локали символ рубля обычно ставится перед числом ('1 234 ₽'), а в американской — после ('$1,234').
Если валюта не поддерживается в выбранной локали, может быть использован символ по умолчанию или ошибка. Рекомендуется явно указывать код валюты и проверять поддержку.
Коррекция формата для специфических случаев: отрицательные числа, экспоненциальная запись
Отрицательные числа отображаются с минусом перед числом или в скобках, в зависимости от локали. В русской локали минус обычно стоит перед числом ('-1 234'), а в американской — тоже ('-$1,234').
Для экспоненциальной записи используется опция notation='scientific', которая преобразует большие числа в формат '1.23e+6'. Это полезно для научных расчетов или отображения очень больших значений.
Пример: число 1000000 с notation='scientific' даст '1e+6' или '1,00e+6' в зависимости от настроек.
Ограничения библиотеки: поддержка браузеров и необходимость polyfill для старых версий
Intl.NumberFormat поддерживается всеми современными браузерами, включая старые версии Chrome, Firefox, Safari и Edge. Однако в некоторых случаях может потребоваться polyfill для поддержки Internet Explorer или очень старых мобильных браузеров.
Для добавления поддержки можно использовать библиотеку core-js или Intl.PluralRules, если требуется расширенная функциональность.
В большинстве случаев использование нативной функции достаточно, так как современные браузеры обеспечивают полную совместимость.
Практический пример кода: полный шаблон функции форматирования с аргументами
Ниже приведен пример функции, которая принимает число и опции для форматирования. Функция позволяет гибко настраивать вывод под разные задачи.
Пример кода:
function formatNumber(value, locale = 'ru-RU', options = {}) {
const formatter = new Intl.NumberFormat(locale, options);
return formatter.format(value);
}
// Пример вызова:
formatNumber(1234567.89, 'ru-RU', { style: 'currency', currency: 'RUB' });
// Результат: '1 234 567,89 ₽'
Эта функция может быть использована в любом проекте для форматирования чисел с учетом региональных особенностей.
Вопросы и ответы
Как отформатировать число без разделителя тысяч?
Используйте опцию useGrouping: false в объекте опций при создании Intl.NumberFormat. Это исключит добавление пробелов или других символов между группами цифр.
Можно ли использовать Intl.NumberFormat для форматирования дробных чисел?
Да, функция поддерживает дробные числа. Количество знаков после запятой задается параметрами minimumFractionDigits и maximumFractionDigits.
Как отобразить число в научной нотации?
Установите опцию notation: 'scientific' в объекте опций. Это преобразует большие числа в формат экспоненты, например '1.23e+6'.
Поддерживает ли Intl.NumberFormat все валюты?
Нет, не все валюты поддерживаются во всех локалях. Рекомендуется явно указывать код валюты и проверять его поддержку в выбранной локали.
function formatNumber(value, locale = 'ru-RU', options = {}) {
const formatter = new Intl.NumberFormat(locale, options);
return formatter.format(value);
}
// Примеры использования:
console.log(formatNumber(1234567.89)); // 1 234 567,89
console.log(formatNumber(1234567.89, 'en-US')); // 1,234,567.89
console.log(formatNumber(1234567.89, 'ru-RU', { style: 'currency', currency: 'RUB' })); // 1 234 567,89 ₽
console.log(formatNumber(1234567.89, 'ru-RU', { useGrouping: false })); // 1234567,89
console.log(formatNumber(1000000, 'ru-RU', { notation: 'scientific' })); // 1e+6
