Форматирование относительного времени в JavaScript

API Intl.RelativeTimeFormat доступно в Baseline в статусе «Widely Available» с 16 марта 2023 года. Это мощный инструмент для отображения относительного времени в локализованном виде, например, «через минуту», «вчера» или «2 недели назад». Он автоматически адаптируется к языку и культурным особенностям региона, делая интерфейс более понятным и дружелюбным для пользователей.

В этой статье мы разберём, как работает Intl.RelativeTimeFormat, и приведём несколько примеров его использования.

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

API Intl.RelativeTimeFormat позволяет форматировать относительное время, учитывая языковые и региональные особенности. Вы создаёте объект Intl.RelativeTimeFormat, указывая нужную локаль (например, ru для русского языка) и опции форматирования. Затем метод format() принимает два аргумента: числовое значение (положительное или отрицательное) и единицу времени (например, day, hour, minute).

Основные единицы времени, которые поддерживает API:

• year — год
• month — месяц
• week — неделя
• day — день
• hour — час
• minute — минута
• second — секунда

Опция numeric: 'auto' позволяет использовать естественные фразы, такие как «вчера» или «завтра», вместо строгого формата вроде «1 день назад».

Базовое использование

Создадим форматтер для русского языка и отобразим несколько вариантов относительного времени:

const formatter = new Intl.RelativeTimeFormat('ru', { numeric: 'auto' });
console.log(formatter.format(-1, 'day')); // Вчера
console.log(formatter.format(1, 'day')); // Завтра
console.log(formatter.format(-2, 'hour')); // 2 часа назад
console.log(formatter.format(3, 'month')); // Через 3 месяца

Этот код создаёт локализованные строки, которые выглядят естественно для русскоязычного пользователя.

Разные локали

Intl.RelativeTimeFormat адаптирует текст под указанную локаль. Сравним, как один и тот же промежуток времени отображается на разных языках:

const ruFormatter = new Intl.RelativeTimeFormat('ru', { numeric: 'auto' });
const enFormatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
const esFormatter = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });

console.log(ruFormatter.format(-1, 'day')); // Вчера
console.log(enFormatter.format(-1, 'day')); // Yesterday
console.log(esFormatter.format(-1, 'day')); // Ayer

Каждая локаль автоматически подстраивает текст под языковые особенности, что делает API идеальным для многоязычных приложений.

Интеграция в интерфейс

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

<style>
.post {
  font-family: Arial, sans-serif;
  margin: 10px;
}
</style>

<script>
function displayRelativeTime(timestamp) {
  const now = new Date();
  const diff = Math.round((timestamp - now) / (1000 * 60 * 60 * 24)); // Разница в днях
  const formatter = new Intl.RelativeTimeFormat('ru', { numeric: 'auto' });
  return formatter.format(diff, 'day');
}

const postDate = new Date('2025-10-18'); // Пример даты
document.write('<p class="post">Опубликовано: ' + displayRelativeTime(postDate) + '</p>');
</script>

Если сегодня 19 октября 2025 года, этот код выведет «Опубликовано: вчера» для поста, созданного 18 октября.

Строгий числовой формат

Если вы хотите использовать строгий формат вместо естественных фраз, установите опцию numeric: 'always'. Это всегда будет показывать числовое значение:

const formatter = new Intl.RelativeTimeFormat('ru', { numeric: 'always' });
console.log(formatter.format(-1, 'day')); // 1 день назад
console.log(formatter.format(2, 'hour')); // Через 2 часа

Этот вариант полезен, когда вам нужно чётко указать количество времени, а не использовать слова вроде «вчера».

Совместимость и ограничения

На октябрь 2025 года Intl.RelativeTimeFormat поддерживается во всех современных браузерах, включая Chrome, Firefox, Edge и Safari, а также в Node.js (с версии 12). Проверить актуальную поддержку можно на Can I Use. Единственное ограничение — в некоторых редких локалях форматирование может быть менее точным из-за ограничений словаря в браузере.

Также обратите внимание, что API работает только с поддерживаемыми единицами времени. Если передать неподдерживаемую единицу, например millisecond, вы получите ошибку.

API Intl.RelativeTimeFormat — это удобный и мощный инструмент для отображения относительного времени в локализованном виде. Он прост в использовании, поддерживает множество языков и идеально подходит для создания интерфейсов, где важна понятность и культурная адаптация. Используйте приведённые примеры, чтобы добавить локализованное время в свои проекты, будь то социальные сети, блоги или приложения!

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.