Когда в интерфейсе появляется текст вроде «5 минут назад» или «через 2 дня», пользователю сразу всё понятно, без чтения точных дат. Именно для этого в стандарте появился Intl.RelativeTimeFormat. Он снимает с вас головную боль с падежами, множественными числами и разными форматами для языков. Вместо громоздких своих функций вы подключаете один небольшой объект и получаете готовое форматирование относительного времени в javascript, причём с учётом выбранной локали и стиля отображения.
Необходимые инструменты и окружение
Чтобы comfortably внедрить intl relativetimeformat javascript в проект, достаточно современного браузера или Node.js версии примерно от 12+. В большинстве актуальных окружений объект уже встроен, поэтому никаких дополнительных библиотек не понадобится. Для старых браузеров можно добавить полифилл, но в обычной фронтенд‑разработке сейчас чаще обходятся без него. Проверить поддержку легко: откройте консоль и выполните `typeof Intl.RelativeTimeFormat`; если видите `"function"`, можно смело продолжать и писать код.
Как подготовиться к работе с локалями
Перед тем как использовать Intl.RelativeTimeFormat в js, определитесь с языками. Иногда достаточно одной локали, например `'ru-RU'`, а иногда нужно автоматически подхватывать язык из настроек пользователя. Объект создаётся так: `new Intl.RelativeTimeFormat('ru', { numeric: 'auto', style: 'long' })`. Параметр `numeric` управляет тем, будет ли текст вроде «вчера» или строго «1 день назад», а `style` задаёт длину: короткий, узкий или полный вариант. Всё это напрямую влияет на то, как будет выглядеть интерфейс.
• `numeric: 'auto'` — «вчера», «сейчас», «завтра`
• `numeric: 'always'` — «1 день назад», «через 1 день»
• `style: 'long' | 'short' | 'narrow'` — уровень сокращений
Пошаговый процесс форматирования
Сам шаблон использования очень простой: сначала создаём форматтер, затем вызываем метод `format`. Например, relative time format js пример:
`const rtf = new Intl.RelativeTimeFormat('ru', { style: 'short' });`
`rtf.format(-5, 'minute'); // "5 мин. назад"`. Отрицательное число означает прошедшее время, положительное — будущее. Единицы измерения фиксированные: `'second'`, `'minute'`, `'hour'`, `'day'`, `'week'`, `'month'`, `'year'`. Обычно вы сначала вычисляете разницу в миллисекундах между двумя датами, приводите её к нужной единице и уже после передаёте в форматтер.
• Отрицательные значения: прошлое — «назад»
• Положительные значения: будущее — «через»
• Ноль: «сейчас» или близкий по смыслу вариант
Практическое применение в интерфейсе
Самый частый сценарий — список постов, сообщений или уведомлений. Там удобно показывать время «N минут назад», и локализация времени javascript intl существенно упрощает задачу. Вы вычисляете, сколько прошло секунд, минут, часов, а затем выбираете наиболее читаемую единицу: до минуты показываете секунды, до часа — минуты, дальше часы и дни. Такой подход делает ленту живой, без перегруза точными датами. При смене языка вам не придётся переписывать код — достаточно указать другую локаль в конструкторе форматтера.
Универсальная вспомогательная функция
Полезно вынести логику в одну функцию, которая принимает дату и возвращает уже готовую строку. Внутри вы определяете массив «диапазон → единица измерения», считаете разницу с `Date.now()` и решаете, в чём именно её показывать. Например, до 45 минут используете минуты, до 24 часов — часы, дальше — дни. Эта функция может принимать локаль как аргумент, чтобы один и тот же код работал и для русского, и для английского, не меняя архитектуру. Так значительно проще поддерживать и развивать проект.
Типичные проблемы и их устранение
Иногда кажется, что всё написано правильно, но форматтер выдаёт неожиданные строки или вовсе падает с ошибкой. Основные причины простые: опечатка в единице измерения (`'minutes'` вместо `'minute'`), неподдерживаемая локаль или отсутствие самого объекта в старом окружении. Если форматирование относительного времени вдруг ломается, сначала проверьте `Intl && Intl.RelativeTimeFormat`, затем список поддерживаемых локалей. Для очень старых браузеров имеет смысл подключить полифилл, который эмулирует работу стандарта через обычные функции и словари.
Отладка и улучшение UX
Когда технически всё работает, можно заняться нюансами: подобрать пороги переключения между секундами, минутами и часами, решить, когда показывать «только что» вместо «0 минут назад». Стоит протестировать интерфейс на реальных данных: длинные периоды вроде «через 11 месяцев» иногда лучше заменить на точную дату, а короткие — наоборот, оставить относительными. Сделайте небольшой `config`, где будете хранить пороги и стили, и используйте его во всех местах, где нужен relative time format js пример — тогда изменения в логике не превратятся в поиск по всему коду.
