Стили отображения: long, short, narrow

Intl API предоставляет единообразные механизмы локализации форматирования данных, среди которых особое место занимают стили отображения long, short, narrow. Эти стили используются в нескольких форматерах — прежде всего в Intl.DateTimeFormat, Intl.RelativeTimeFormat и Intl.ListFormat. Их задача — управлять степенью подробности и формой представления текста в зависимости от языка и контекста.

В Intl.DateTimeFormat стили применяются через опции dateStyle и timeStyle. Они задают готовые шаблоны форматирования даты и времени без необходимости вручную комбинировать поля.

Основные уровни детализации

  • long — развёрнутое представление
  • short — сокращённое, компактное отображение
  • narrow — максимально сжатая форма, часто с символами или минимальными обозначениями

Эти стили учитывают локаль, поэтому результат существенно различается между языками и регионами.

dateStyle

dateStyle управляет форматом даты целиком.

const d = new Date(2026, 0, 24);

new Intl.DateTimeFormat('ru-RU', { dateStyle: 'long' }).format(d);
// "24 января 2026 г."

new Intl.DateTimeFormat('ru-RU', { dateStyle: 'short' }).format(d);
// "24.01.2026"

new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(d);
// "January 24, 2026"

Различия между стилями проявляются в уровне вербализации:

  • long использует полные названия месяцев и структурированную форму
  • short ориентирован на цифровое представление
  • narrow в зависимости от локали может совпадать с short или быть ещё более сжатым

timeStyle

timeStyle задаёт формат времени:

const d = new Date(2026, 0, 24, 18, 45);

new Intl.DateTimeFormat('ru-RU', { timeStyle: 'long' }).format(d);
// "18:45:00"

new Intl.DateTimeFormat('ru-RU', { timeStyle: 'short' }).format(d);
// "18:45"

В разных локалях поведение отличается:

  • в англоязычных регионах может применяться 12-часовой формат
  • в европейских — 24-часовой
  • long чаще добавляет секунды

Комбинация dateStyle и timeStyle

Использование обоих параметров одновременно создаёт полный формат:

new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'long',
  timeStyle: 'short'
}).format(new Date(2026, 0, 24, 18, 45));
// "24 January 2026 at 18:45"

RelativeTimeFormat: long, short, narrow

Intl.RelativeTimeFormat формирует относительные выражения времени: «2 дня назад», «через 3 часа».

Структура стилей

Параметр style принимает:

  • long
  • short
  • narrow
const rtfLong = new Intl.RelativeTimeFormat('ru', { style: 'long' });
rtfLong.format(-5, 'day');
// "5 дней назад"

long

Наиболее читаемая форма, использующая полные слова:

new Intl.RelativeTimeFormat('ru', { style: 'long' }).format(3, 'hour');
// "через 3 часа"

Характерные особенности:

  • полные грамматические формы
  • высокая читаемость
  • минимальная компрессия информации

short

Сокращённое отображение:

new Intl.RelativeTimeFormat('en', { style: 'short' }).format(-2, 'minute');
// "2 min. ago"

Особенности:

  • аббревиатуры единиц времени
  • сокращённые слова
  • баланс между компактностью и понятностью

narrow

Максимально сжатая форма:

new Intl.RelativeTimeFormat('en', { style: 'narrow' }).format(5, 'second');
// "in 5 sec."

Характеристики:

  • минимальные обозначения
  • часто отсутствуют пробелы или предлоги
  • используется в плотных интерфейсах

ListFormat: long, short, narrow

Intl.ListFormat отвечает за форматирование списков с учётом грамматики языка.

const list = ['яблоко', 'груша', 'слива'];

new Intl.ListFormat('ru', { style: 'long', type: 'conjunction' }).format(list);
// "яблоко, груша и слива"

style: long

Полная грамматическая форма соединения элементов:

new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
  .format(['bread', 'milk', 'cheese']);
// "bread, milk, and cheese"

Особенности:

  • корректные союзы
  • запятые и правила языка
  • максимальная читаемость

style: short

Сокращённая форма, ориентированная на компактность:

new Intl.ListFormat('en', { style: 'short', type: 'conjunction' })
  .format(['bread', 'milk', 'cheese']);
// "bread, milk & cheese"

Характерные черты:

  • использование символа & или аналогов
  • упрощённые грамматические конструкции
  • сокращение длины строки

style: narrow

Минимально возможное представление:

new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' })
  .format(['bread', 'milk', 'cheese']);
// "bread, milk, cheese"

Особенности:

  • часто отсутствует союз
  • только разделители
  • максимальная плотность информации

Взаимосвязь стилей между форматерами

Несмотря на общую терминологию, поведение long, short, narrow зависит от конкретного API:

  • в DateTimeFormat стили управляют структурой даты и времени
  • в RelativeTimeFormat — лексической полнотой выражений
  • в ListFormat — правилами соединения элементов списка

Общая тенденция сохраняется:

  • long — максимальная языковая полнота
  • short — компромисс между длиной и читаемостью
  • narrow — минимизация символов

Локализация и зависимость от языка

Результаты форматирования не являются фиксированными строками. Они зависят от:

  • языковой локали (ru, en, de, fr)
  • региональных правил
  • ICU-реализаций в движке JavaScript

Одно и то же значение может быть представлено различно:

new Intl.RelativeTimeFormat('ru', { style: 'short' }).format(-1, 'day');
// "1 дн. назад"

new Intl.RelativeTimeFormat('en', { style: 'short' }).format(-1, 'day');
// "1 day ago"

Практические различия плотности представления

Стилевые различия особенно заметны в интерфейсах с ограниченным пространством:

  • панели уведомлений используют narrow
  • списки и карточки — short
  • отчёты и документы — long

Для DateTimeFormat:

  • long подходит для печатных форм и детальных просмотров
  • short — для таблиц и интерфейсов
  • narrow — для компактных индикаторов времени

Для RelativeTimeFormat:

  • long — текстовые блоки и ленты событий
  • short — UI-метки
  • narrow — таймлайны и статусные индикаторы

Особенности поддержки в движках

Поддержка стилей зависит от версии ECMAScript Internationalization API и ICU-библиотек:

  • long поддерживается максимально стабильно
  • short зависит от локали и версии ICU
  • narrow может совпадать с short или long при отсутствии специфичных правил

В некоторых окружениях различия между short и narrow минимальны, особенно для дат и времени, тогда как в списках они выражены сильнее.

Поведение при отсутствии данных

Если конкретная локаль не определяет отдельные правила для narrow или short, происходит деградация:

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

Сравнительная характеристика

Стиль Назначение Длина строки Читаемость Плотность
long Полная форма высокая максимальная низкая
short Сокращённая форма средняя высокая средняя
narrow Минимальная форма минимальная ограниченная высокая
Оглавление