Intl.DurationFormat: Форматирование временных интервалов с поддержкой локали

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

Объект Intl.DurationFormat элегантно решает данную проблему. Он является частью основной спецификации языка ECMAScript — в частности, ECMAScript Internationalization API (ECMA-402). Это делает его нативной функцией JavaScript, а не API веб-браузера, хотя браузерная реализация определяет его доступность.

По сути, Intl.DurationFormat принимает объект duration, содержащий единицы времени, и форматирует его в соответствии с правилами, специфичными для конкретной локали. Базовое использование очень простое.

const duration = { hours: 2, minutes: 30 };
const formatter = new Intl.DurationFormat('ru-RU', { style: 'long' });
const result = formatter.format(duration);
// Результат: "2 часа 30 минут"

Объект duration принимает несколько единиц измерения времени: years, months, weeks, days, hours, minutes, seconds, milliseconds, microseconds и nanoseconds. Такая гибкость позволяет представлять любые временные интервалы — от наносекунд до столетий.

Параметр locale определяет, как отображается временной интервал в зависимости от языка и региональных соглашений. В английском языке может использоваться «and» перед конечной единицей, а во французском — «et» — эти нюансы учитываются автоматически:

const duration = { hours: 1, minutes: 30 };

// Русское форматирование
new Intl.DurationFormat('ru-RU', { style: 'long' }).format(duration);
// "1 час 30 минут"

// Английское форматирование
new Intl.DurationFormat('en-US', { style: 'long' }).format(duration);
// "1 hour and 30 minutes"

// Французское форматирование
new Intl.DurationFormat('fr-FR', { style: 'long' }).format(duration);
// "1 heure et 30 minutes"

// Японское форматирование
new Intl.DurationFormat('ja-JP', { style: 'long' }).format(duration);
// "1時間30分"

Стиль вывода можно настроить с помощью параметра options. Существует три основных стиля: long, short и narrow. И digital похожий на short, но отображающий время в более компактном цифровом формате. Каждый из стилей обеспечивает всё более компактное представление:

const duration = { hours: 2, minutes: 45, seconds: 30 };

// Длинный формат - полное написание
new Intl.DurationFormat('ru-RU', { style: 'long' }).format(duration);
// "2 часа 45 минут 30 секунд"

// Краткий формат - сокращённый, но понятный
new Intl.DurationFormat('ru-RU', { style: 'short' }).format(duration);
// "2 ч 45 мин 30 с"

// Сжатый формат - компактный
new Intl.DurationFormat('ru-RU', { style: 'narrow' }).format(duration);
// "2 ч 45 мин 30 с"

// Цифровой формат - самый компактный
new Intl.DurationFormat('ru-RU', { style: 'digital' }).format(duration);
// "2:45:30"

В завершение последний пример. В нём демонстрируется весь спектр единиц временного интервала и то, как Intl.DurationFormat их обрабатывает.

// Полный объект duration с использованием всех возможных единиц времени
const fullDuration = {
  years: 2,
  months: 3,
  weeks: 1,
  days: 4,
  hours: 12,
  minutes: 30,
  seconds: 15,
  milliseconds: 300,
  microseconds: 750,
  nanoseconds: 500
};

const formatter = style => new Intl.DurationFormat('ru-RU', { style });

// Полный формат - полная формулировка
const formattedLongDuration = formatter('long').format(fullDuration);
console.log(formattedLongDuration);
// Вывод: "2 года 3 месяца 1 неделя 4 дня 12 часов 30 минут 15 секунд 300 миллисекунд 750 микросекунд 500 наносекунд"

// Краткий формат - сокращённый, но понятный
const formattedShortDuration = formatter('short').format(fullDuration);
console.log(formattedShortDuration);
// Вывод: "2 г. 3 мес. 1 нед. 4 дн. 12 ч 30 мин 15 с 300 мс 750 мкс 500 нс"

// Сжатый формат - компактный
const formattedNarrowDuration = formatter('narrow').format(fullDuration);
console.log(formattedNarrowDuration);
// Вывод: "2 г. 3 м. 1 н. 4 д. 12 ч 30 мин 15 с 300 мс 750 мкс 500 нс"

// Цифровой формат - самый компактный
const formattedDigitalDuration = formatter('digital').format(fullDuration);
console.log(formattedDigitalDuration);
// Вывод: "2 г. 3 мес. 1 нед. 4 дн. 12:30:15,3007505"

Комментарии