Intl.DurationFormat теперь является базовым. Недавно доступно.

bookmark_border Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Jeremy Wagner

Опубликовано: 20 марта 2025 г.

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

Intl.DurationFormat — это полезная функция, которая делает это за вас в браузере, учитывая при этом любые ваши потребности в интернационализации, без необходимости использования дополнительного JavaScript. По состоянию на март 2025 г. он стал «Базовым новым доступным».

Как работает Intl.DurationFormat

Intl.DurationFormat — это класс, который при создании экземпляра возвращает строку, описывающую продолжительность времени. Он работает путем указания объекта, содержащего ключи и значения, соответствующие единицам времени, для которых вы хотите создать строку:

// Specify the duration:
const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 yr, 20 hr, 15 min, 35 sec'
new Intl.DurationFormat('en').format(duration);

Чтобы вернуть строку в длинном формате, передайте значение 'long' параметру style во втором аргументе конструктора:

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);

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

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);

// Output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);

// Output: '1年20小时15分钟35秒钟'
new Intl.DurationFormat('zh', { style: 'long' }).format(duration);

// Output: '1 år, 20 timer, 15 minutter og 35 sekunder'
new Intl.DurationFormat('no', { style: 'long' }).format(duration);

// Output: 'mwaka 1, saa 20, dakika 15 na sekunde 35'
new Intl.DurationFormat('sw', { style: 'long' }).format(duration);

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