JavaScript Intl.RelativeTimeFormat: «2 дня назад»

Категория: JavaScript · Язык: JavaScript · Обновлено:

Intl.RelativeTimeFormat форматирует разницу во времени словами: «2 дня назад», «через 3 часа», «вчера». Вы передаёте число и единицу, а браузер сам выбирает форму с учётом языка, падежей и множественного числа. Это проще, чем вручную склонять «день/дня/дней».

Показать прошедшее и будущее

JavaScript
const rtf = new Intl.RelativeTimeFormat("en-US", {numeric: "auto"});

console.log(rtf.format(-1, "day"));   // yesterday
console.log(rtf.format(-2, "day"));   // 2 days ago
console.log(rtf.format(3, "hour"));   // in 3 hours

Отрицательное значение означает прошлое, положительное — будущее. Единицы: year, quarter, month, week, day, hour, minute, second. При numeric: "auto" браузер использует слова вроде «yesterday» там, где они есть; при numeric: "always" будет «1 day ago».

Локализовать на русский

JavaScript
const ru = new Intl.RelativeTimeFormat("ru-RU", {numeric: "auto"});

console.log(ru.format(-3, "day"));   // 3 дня назад
console.log(ru.format(5, "minute")); // через 5 минут

Русские формы выбираются по правилам языка: «1 день назад», «2 дня назад», «5 дней назад». Для других локалей результат тоже будет корректным без таблиц склонений. Если нужен только текст без числа, используйте formatToParts() и соберите строку.

RelativeTimeFormat не сравнивает даты и не учитывает календарные месяцы: разницу нужно вычислить самостоятельно и передать в удобной единице. Для абсолютных дат используйте Intl.DateTimeFormat, для длительности — Intl.DurationFormat (там, где он поддержан). Округление выбирайте осознанно: 25 часов — это «1 день» или «25 часов»?

Метод поддерживается в Chrome 71+, Firefox 65+, Safari 14+ и Node.js 12+. Локаль лучше задавать явно, особенно при серверном рендере. Не создавайте форматтер на каждый элемент списка: вынесите его в модуль и переиспользуйте.

Документация: Intl.RelativeTimeFormat, formatToParts.