Декораторы форматирования

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

Ключевая особенность — отделение логики отображения от бизнес-логики. Одно и то же число может иметь разные визуальные формы без изменения исходных данных.

Базовое форматирование

const formatter = new Intl.NumberFormat('ru-RU');

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

Локаль ru-RU задаёт пробел как разделитель тысяч и запятую как десятичный разделитель.

Форматирование валют

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

usd.format(99.99);
// "$99.99"
const rub = new Intl.NumberFormat('ru-RU', {
  style: 'currency',
  currency: 'RUB'
});

rub.format(99.99);
// "99,99 ₽"

Формат валюты зависит от стандартов ISO 4217 и локальных правил отображения.

Проценты и относительные величины

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

percent.format(0.25);
// "25%"

Внутренне значение интерпретируется как доля от единицы.

Управление точностью

const precise = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 4
});

precise.format(12.3);
// "12.30"
precise.format(12.34567);
// "12.3457"

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

Форматирование дат и времени через Intl.DateTimeFormat

Intl.DateTimeFormat отвечает за локализованное представление даты и времени. Он учитывает календарные системы, часовые пояса и культурные нормы отображения времени.

Базовое использование

const dtf = new Intl.DateTimeFormat('ru-RU');

dtf.format(new Date());
// "27.05.2026"

Формат зависит от локали и системных настроек.

Полный контроль отображения

const full = new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'full',
  timeStyle: 'long'
});

full.format(new Date());
// "Wednesday, 27 May 2026 at 14:35:10 GMT+6"

Составные поля даты

const custom = new Intl.DateTimeFormat('ru-RU', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

custom.format(new Date());
// "среда, 27 мая 2026 г."

Часовые пояса

const tz = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeStyle: 'short',
  dateStyle: 'short'
});

tz.format(new Date());

Один и тот же момент времени отображается по-разному в зависимости от зоны.

Лексическое форматирование списков через Intl.ListFormat

Intl.ListFormat используется для корректного соединения элементов списка с учётом грамматики языка.

Базовый список

const list = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });

list.format(['HTML', 'CSS', 'JavaScript']);
// "HTML, CSS, and JavaScript"

Альтернативные режимы

const disjunction = new Intl.ListFormat('en', { type: 'disjunction' });

disjunction.format(['Chrome', 'Firefox', 'Safari']);
// "Chrome, Firefox, or Safari"

Локализация

const ruList = new Intl.ListFormat('ru', { type: 'conjunction' });

ruList.format(['яблоко', 'банан', 'груша']);
// "яблоко, банан и груша"

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

Работа с множественными формами через Intl.PluralRules

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

Базовая классификация

const rules = new Intl.PluralRules('ru-RU');

rules.select(1);
// "one"

rules.select(2);
// "few"

rules.select(5);
// "many"

Использование в прикладной логике

const ru = new Intl.PluralRules('ru-RU');

function formatApple(count) {
  const forms = {
    one: 'яблоко',
    few: 'яблока',
    many: 'яблок',
    other: 'яблока'
  };

  return `${count} ${forms[ru.select(count)]}`;
}

formatApple(3);
// "3 яблока"

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

Относительное время через Intl.RelativeTimeFormat

Intl.RelativeTimeFormat формирует выражения вроде «3 дня назад» или «через 2 часа».

Базовое использование

const rtf = new Intl.RelativeTimeFormat('ru-RU');

rtf.format(-1, 'day');
// "1 день назад"

rtf.format(2, 'hour');
// "через 2 часа"

Настройка стиля

const compact = new Intl.RelativeTimeFormat('en', {
  numeric: 'auto'
});

compact.format(-1, 'day');
// "yesterday"

Поддерживаемые единицы

  • second
  • minute
  • hour
  • day
  • week
  • month
  • quarter
  • year

Механизм применяет грамматические правила языка для построения естественных выражений времени.

Сравнение строк через Intl.Collator

Intl.Collator обеспечивает корректное лексикографическое сравнение строк с учётом языка.

Базовая сортировка

const collator = new Intl.Collator('ru');

['яблоко', 'арбуз', 'банан'].sort(collator.compare);

Результат сортировки соответствует правилам языка, а не Unicode-порядку.

Чувствительность к регистру

const caseInsensitive = new Intl.Collator('en', {
  sensitivity: 'base'
});

caseInsensitive.compare('a', 'A');
// 0

Натуральная сортировка

const natural = new Intl.Collator('en', {
  numeric: true
});

['file1', 'file10', 'file2'].sort(natural.compare);
// ['file1', 'file2', 'file10']

Форматирование единиц измерения через Intl.NumberFormat (units)

Современные реализации Intl.NumberFormat поддерживают форматирование физических величин.

Пример расстояния

const distance = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

distance.format(5);
// "5 kilometers"

Скорость

const speed = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer-per-hour'
});

speed.format(120);
// "120 km/h"

Единицы стандартизированы и соответствуют Unicode CLDR.

Разбиение текста через Intl.Segmenter

Intl.Segmenter применяется для корректного разбиения текста на слова или предложения с учётом языка.

Сегментация по словам

const segmenter = new Intl.Segmenter('en', { granularity: 'word' });

[...segmenter.segment('Hello world')].map(s => s.segment);
// ["Hello", " ", "world"]

Сегментация по предложениям

const sentenceSegmenter = new Intl.Segmenter('en', {
  granularity: 'sentence'
});

[...sentenceSegmenter.segment('Hello. World!')].map(s => s.segment);
// ["Hello. ", "World!"]

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

Единая архитектура форматирования через Intl

Все компоненты Intl объединены общей моделью:

  • локаль как первый аргумент
  • объект опций для конфигурации
  • неизменяемость форматтеров
  • отсутствие зависимости от среды выполнения

Форматтеры можно создавать один раз и переиспользовать:

const nf = new Intl.NumberFormat('ru-RU');
const df = new Intl.DateTimeFormat('ru-RU');

function render(price, date) {
  return `${nf.format(price)} — ${df.format(date)}`;
}

Такой подход снижает накладные расходы при массовом форматировании данных.

Комбинирование форматтеров в прикладных сценариях

Финансовые отчёты

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

const date = new Intl.DateTimeFormat('en-US', {
  dateStyle: 'medium'
});

function report(amount, timestamp) {
  return `${money.format(amount)} (${date.format(timestamp)})`;
}

Интерфейсы статистики

const number = new Intl.NumberFormat('ru-RU');
const rtf = new Intl.RelativeTimeFormat('ru-RU');

function stats(value, daysAgo) {
  return `${number.format(value)} · ${rtf.format(-daysAgo, 'day')}`;
}

Архитектура Intl позволяет строить устойчивые к локализации системы представления данных без дублирования логики форматирования.

Оглавление