Как отформатировать относительное время как «вчера» или «1 день назад»?

Введение

Метки времени встречаются повсюду в современных веб-приложениях. В соцсетях можно увидеть «опубликовано вчера», а на аналитической панели — «1 день назад». Оба варианта описывают один и тот же промежуток времени, но формулировка создает разное восприятие. Первый вариант звучит разговорно и естественно, второй — точно и формально.

JavaScript позволяет управлять этим выбором формата с помощью API Intl.RelativeTimeFormat. Вы сами решаете, увидят ли пользователи естественные выражения вроде «вчера» или числовые вроде «1 день назад». Это влияет на то, насколько формальным или неформальным будет ваш интерфейс.

Опция numeric управляет стилем формата

Опция numeric в Intl.RelativeTimeFormat определяет формат вывода. Эта опция принимает два значения.

Значение auto использует естественные выражения, если они есть. Значение always всегда использует числовые выражения.

const autoFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
const alwaysFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

Эти два форматтера выдают разный результат для одних и тех же значений времени.

Используйте auto для отображения «вчера» и «завтра»

Установите numeric в auto, если хотите использовать естественные выражения. Форматтер покажет «вчера», «сегодня» и «завтра» для значений дней -1, 0 и 1.

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

rtf.format(-1, 'day');  // "yesterday"
rtf.format(0, 'day');   // "today"
rtf.format(1, 'day');   // "tomorrow"

Если естественного аналога нет, форматтер переключается на числовое выражение.

rtf.format(-2, 'day');  // "2 days ago"
rtf.format(2, 'day');   // "in 2 days"

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

Используйте always для отображения числовых значений

Установите numeric в always, если вам нужен единый числовой вывод. Форматтер создает числовые выражения для всех значений, включая -1, 0 и 1.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

rtf.format(-1, 'day');  // "1 day ago"
rtf.format(0, 'day');   // "in 0 days"
rtf.format(1, 'day');   // "in 1 day"

Значение always используется по умолчанию, если вы не указываете опцию numeric.

const rtf = new Intl.RelativeTimeFormat('en-US');
rtf.format(-1, 'day');  // "1 day ago"

Это значение по умолчанию обеспечивает единообразное числовое форматирование, если вы явно не выберете естественные выражения.

Естественные временные выражения есть и в других языках

Помимо английского, в других языках есть свои естественные временные выражения. Во французском — «hier» для «вчера», в испанском — «ayer», а в японском — «昨日».

const frenchRtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' });
frenchRtf.format(-1, 'day');  // "hier"
frenchRtf.format(1, 'day');   // "demain"

const spanishRtf = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });
spanishRtf.format(-1, 'day');  // "ayer"
spanishRtf.format(1, 'day');   // "mañana"

const japaneseRtf = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
japaneseRtf.format(-1, 'day');  // "昨日"
japaneseRtf.format(1, 'day');   // "明日"

Опция numeric работает во всех локалях. Пользователи видят естественные выражения на своем языке, если вы выбираете auto. Они видят числовые выражения на своем языке, если вы выбираете always.

Выбирайте в зависимости от стиля интерфейса

Формальные интерфейсы выигрывают от numeric: 'always'. Дашборды аналитики, системные логи и технические отчеты требуют точного и стабильного форматирования. Числовые значения обеспечивают такую точность для любых временных диапазонов.

Неформальные интерфейсы выигрывают от numeric: 'auto'. Ленты соцсетей, мессенджеры и форумы создают ощущение общения через естественный язык. Выражения вроде «вчера» и «завтра» звучат более по-человечески.

Думайте о согласованности во всем интерфейсе. Смешивание обоих стилей в разных частях одного приложения сбивает с толку. Пользователи ожидают, что временные метки будут оформлены одинаково на всем протяжении использования.

Значение по умолчанию always обеспечивает наиболее предсказуемое поведение. Используйте auto осознанно, если естественный язык улучшает ваш интерфейс.