JS Advanced

Intl — интернационализация

Понять, как использовать Intl.NumberFormat, Intl.DateTimeFormat и Intl.RelativeTimeFormat для локализации.

Продвинутый (Advanced)

Кратко

Intl — встроенный модуль JavaScript для интернационализации. Intl.NumberFormat форматирует числа (валюты, проценты). Intl.DateTimeFormat — даты. Intl.RelativeTimeFormat — относительное время (2 часа назад). Все работают с разными локалями.


Подробно

Intl.NumberFormat: const formatter = new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }); console.log(formatter.format(1234567.89)); // '1 234 567,89 ₽'

const percent = new Intl.NumberFormat('en-US', { style: 'percent' }); console.log(percent.format(0.85)); // '85%'

Intl.DateTimeFormat: const date = new Date();

const ru = new Intl.DateTimeFormat('ru-RU', { dateStyle: 'full', timeStyle: 'short' }); console.log(ru.format(date)); // 'воскресенье, 4 сентября 2026 г., 14:30'

const us = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); console.log(us.format(date)); // 'September 4, 2026'

Intl.RelativeTimeFormat: const rtf = new Intl.RelativeTimeFormat('ru-RU', { numeric: 'auto' }); console.log(rtf.format(-1, 'day')); // 'вчера' console.log(rtf.format(-2, 'day')); // '2 дня назад' console.log(rtf.format(1, 'hour')); // 'через час'

Локали:

  • 'ru-RU' — русский (Россия)
  • 'en-US' — английский (США)
  • 'de-DE' — немецкий (Германия)
  • 'ja-JP' — японский (Япония)

Ментальная модель

Intl — как переводчик для чисел и дат. Вы говорите: «Покажи 1234567 как валюту по-русски». Intl отвечает: «1 234 567,89 ₽». По-немецки: «1.234.567,89 €». По-японски: 「¥1,234,567」.


Примеры

**Самый простой:**

javascript
const num = 1234567.89;

console.log(new Intl.NumberFormat('ru-RU').format(num)); // '1 234 567,89'
console.log(new Intl.NumberFormat('en-US').format(num)); // '1,234,567.89'
console.log(new Intl.NumberFormat('de-DE').format(num)); // '1.234.567,89'

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

**Простой:**

javascript
// Валюта
const price = 49.99;
const rub = new Intl.NumberFormat('ru-RU', {
  style: 'currency', currency: 'RUB'
}).format(price);
const usd = new Intl.NumberFormat('en-US', {
  style: 'currency', currency: 'USD'
}).format(price);

console.log(rub); // '49,99 ₽'
console.log(usd); // '$49.99'

// Дата
const date = new Date('2026-09-04');
console.log(new Intl.DateTimeFormat('ru-RU', {
  dateStyle: 'long'
}).format(date)); // '4 сентября 2026 г.'

Валюта и дата в разных форматах.

**Реальный пример:**

javascript
// Относительное время
function timeAgo(date) {
  const rtf = new Intl.RelativeTimeFormat('ru-RU', { numeric: 'auto' });
  const diff = date - new Date();
  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);

  if (Math.abs(days) > 0) return rtf.format(days, 'day');
  if (Math.abs(hours) > 0) return rtf.format(hours, 'hour');
  if (Math.abs(minutes) > 0) return rtf.format(minutes, 'minute');
  return rtf.format(seconds, 'second');
}

console.log(timeAgo(new Date(Date.now() - 3600000))); // 'час назад'
console.log(timeAgo(new Date(Date.now() + 86400000))); // 'завтра'

Реальный пример: relative time для соцсетей.


Частые ошибки

**Неправильно:** Писать собственные форматы вместо Intl

**Почему:** Intl учитывает все особенности локалей (разделители, порядок, склонения).

**Правильно:** Используйте Intl — он уже знает все правила форматирования.

**Неправильно:** Путать locale и language

**Почему:** Locale — это язык + регион (ru-RU vs ru-UA). Language — только язык (ru).

**Правильно:** Locale = language + region (en-US vs en-GB).


Важно запомнить

  • Intl.NumberFormat — числа и валюты
  • Intl.DateTimeFormat — даты и время
  • Intl.RelativeTimeFormat — относительное время
  • Локали: 'ru-RU', 'en-US', 'de-DE'
  • Все форматы учитывают особенности локалей

Связь

Назад: Вы знаете типы (J3) и дату (J19). Intl даёт форматирование с учётом локали.

Вперёд: Следующий урок (JV20) — WeakRef и FinalizationRegistry.

Материалы курса JS Advanced — PROlab Academy.