Как отображать длительности в краткой или полной форме

Введение

Когда вы отображаете, сколько времени занимает что-либо, формат занимает разное количество места. Продолжительность тренировки в 1 час и 30 минут может отображаться как "1 час и 30 минут", "1 ч и 30 мин" или "1ч 30м" в зависимости от того, сколько у вас места и насколько четко нужно это показать. Каждый формат балансирует читаемость и горизонтальное пространство.

Разные контексты требуют разных вариантов форматирования. Панель управления видеоплеера, показывающая продолжительность, выигрывает от компактного текста, такого как "1ч 30м". Экран с итогами тренировки, объясняющий продолжительность сессии, требует четкого текста, такого как "1 час и 30 минут". Мобильная панель управления, показывающая несколько значений таймера, использует максимально компактную форму, чтобы уместить информацию на экране.

JavaScript Intl.DurationFormat предоставляет опцию style для управления этим выбором. Вы можете выбрать между длинным отображением с полностью прописанными словами, коротким отображением со стандартными сокращениями или узким отображением с максимально компактным представлением. Эта опция дает вам точный контроль над тем, как продолжительность отображается для пользователей.

Что контролирует опция style

Опция style в Intl.DurationFormat принимает три значения для текстового форматирования: "long", "short" и "narrow". Каждое значение создает разный уровень подробности для вывода продолжительности.

Значение long полностью прописывает названия единиц, например, "1 час и 30 минут". Значение short использует стандартные сокращения, такие как "1 ч и 30 мин". Значение narrow создает максимально компактное представление, такое как "1ч 30м", часто убирая пробелы и используя минимальные символы.

const duration = { hours: 1, minutes: 30 };

const longFormatter = new Intl.DurationFormat("ru-RU", {
  style: "long"
});

console.log(longFormatter.format(duration));
// Вывод: "1 час и 30 минут"

const shortFormatter = new Intl.DurationFormat("ru-RU", {
  style: "short"
});

console.log(shortFormatter.format(duration));
// Вывод: "1 ч и 30 мин"

const narrowFormatter = new Intl.DurationFormat("ru-RU", {
  style: "narrow"
});

console.log(narrowFormatter.format(duration));
// Вывод: "1ч 30м"

Опция style по умолчанию имеет значение "short", если вы её не укажете. Это означает, что форматирование продолжительности использует стандартные сокращения, если вы явно не запросите другой стиль отображения.

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

Длинный стиль полностью прописывает названия единиц времени. Этот формат обеспечивает максимальную ясность за счёт использования дополнительного горизонтального пространства.

const formatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

const duration = { hours: 2, minutes: 30 };

console.log(formatter.format(duration));
// Вывод: "2 hours and 30 minutes"

Форматировщик автоматически обрабатывает единственное и множественное число. Один час используется в единственном числе "hour", а несколько часов — во множественном "hours". Вам не нужно вручную определять, какую форму использовать.

const formatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

console.log(formatter.format({ hours: 1, minutes: 30 }));
// Вывод: "1 hour and 30 minutes"

console.log(formatter.format({ hours: 2, minutes: 1 }));
// Вывод: "2 hours and 1 minute"

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

const formatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Вывод: "2 hours, 30 minutes and 45 seconds"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Вывод: "5 minutes and 30 seconds"

console.log(formatter.format({ hours: 1, minutes: 0, seconds: 15 }));
// Вывод: "1 hour, 0 minutes and 15 seconds"

Форматировщик добавляет соответствующие союзы между единицами. В английском языке используются запятые и "and" для разделения единиц. Союз появляется перед последней единицей в списке.

Длинный стиль делает длительности сразу понятными, не требуя от пользователей интерпретации сокращений. Пользователи, незнакомые с сокращениями времени, находят полностью прописанные единицы более доступными.

Форматирование длительности в коротком стиле

Короткий стиль использует стандартные сокращения, которые большинству людей знакомы. Этот формат балансирует читаемость и экономию пространства.

const formatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

const duration = { hours: 2, minutes: 30 };

console.log(formatter.format(duration));
// Вывод: "2 hr and 30 min"

Форматировщик использует общепринятые сокращения. Часы становятся "hr", минуты — "min", а секунды — "sec". Эти сокращения сохраняют читаемость, уменьшая количество символов.

const formatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Вывод: "1 hr, 46 min and 40 sec"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Вывод: "5 min and 30 sec"

console.log(formatter.format({ hours: 3, minutes: 15 }));
// Вывод: "3 hr and 15 min"

Короткий стиль используется по умолчанию. Если вы не укажете опцию style, форматировщик автоматически применит короткий стиль.

const formatter = new Intl.DurationFormat("en-US");

console.log(formatter.format({ hours: 2, minutes: 30 }));
// Вывод: "2 hr and 30 min"

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

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

const formatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

console.log(formatter.format({ days: 2, hours: 5 }));
// Вывод: "2 days and 5 hr"

console.log(formatter.format({ weeks: 1, days: 3 }));
// Вывод: "1 wk and 3 days"

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Вывод: "1 hr, 30 min, 45 sec and 500 ms"

Каждый тип единицы времени использует своё стандартное сокращение. Дни остаются "days", недели — "wk", а миллисекунды — "ms". Эти сокращения широко признаны и подходят для большинства контекстов.

Форматирование длительности в узком стиле

Узкий стиль обеспечивает максимально компактное представление. Этот формат убирает пробелы и использует минимальные символы, чтобы сэкономить каждый символ.

const formatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

const duration = { hours: 2, minutes: 30 };

console.log(formatter.format(duration));
// Вывод: "2ч 30м"

Форматировщик использует однобуквенные сокращения и минимальные пробелы. Часы становятся "ч", минуты — "м", а секунды — "с". Вывод значительно компактнее, чем в коротком или длинном стиле.

const formatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Вывод: "1ч 46м 40с"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Вывод: "5м 30с"

console.log(formatter.format({ hours: 3, minutes: 15 }));
// Вывод: "3ч 15м"

Разные единицы времени дают разные узкие представления в соответствии со стандартными соглашениями.

const formatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format({ days: 2, hours: 5 }));
// Вывод: "2д 5ч"

console.log(formatter.format({ weeks: 1, days: 3 }));
// Вывод: "1н 3д"

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Вывод: "1ч 30м 45с 500мс"

Узкий стиль лучше всего подходит, когда пространство крайне ограничено, а пользователи знакомы с контекстом измерения времени. Компактный формат предполагает, что пользователи могут интерпретировать единицы времени без явного разделения или пояснений.

Сравнение длинного, короткого и узкого стилей

Различия между тремя вариантами стилей становятся очевидными, когда вы форматируете одни и те же длительности с каждым из них.

const longFormatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

const shortFormatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

const narrowFormatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

const duration = { hours: 1, minutes: 30, seconds: 45 };

console.log("Длинный:   " + longFormatter.format(duration));
console.log("Короткий:  " + shortFormatter.format(duration));
console.log("Узкий: " + narrowFormatter.format(duration));

// Вывод:
// Длинный:   1 час, 30 минут и 45 секунд
// Короткий:  1 ч, 30 мин и 45 сек
// Узкий:   1ч 30м 45с

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

Вы можете сравнить разные длительности, чтобы увидеть, как каждый стиль обрабатывает различные временные интервалы.

const durations = [
  { hours: 2, minutes: 15 },
  { minutes: 5, seconds: 30 },
  { hours: 1, minutes: 0, seconds: 10 },
  { days: 1, hours: 3, minutes: 45 }
];

durations.forEach(duration => {
  const long = new Intl.DurationFormat("en-US", {
    style: "long"
  }).format(duration);

  const short = new Intl.DurationFormat("en-US", {
    style: "short"
  }).format(duration);

  const narrow = new Intl.DurationFormat("en-US", {
    style: "narrow"
  }).format(duration);

  console.log("Длительность:");
  console.log("  Длинный:   " + long);
  console.log("  Короткий:  " + short);
  console.log("  Узкий: " + narrow);
  console.log("");
});

// Вывод:
// Длительность:
//   Длинный:   2 часа и 15 минут
//   Короткий:  2 ч и 15 мин
//   Узкий: 2ч 15м
//
// Длительность:
//   Длинный:   5 минут и 30 секунд
//   Короткий:  5 мин и 30 сек
//   Узкий: 5м 30с
//
// Длительность:
//   Длинный:   1 час, 0 минут и 10 секунд
//   Короткий:  1 ч, 0 мин и 10 сек
//   Узкий: 1ч 0м 10с
//
// Длительность:
//   Длинный:   1 день, 3 часа и 45 минут
//   Короткий:  1 день, 3 ч и 45 мин
//   Узкий: 1д 3ч 45м

Разница в количестве символов становится значительной при отображении нескольких длительностей. В таблице или списке, показывающем множество длительностей, узкий стиль экономит значительное горизонтальное пространство по сравнению с длинным стилем.

Как стили отображения длительности различаются в разных языках

Все три варианта стиля адаптируются к указанной вами локали. Разные языки используют разные сокращения, названия единиц, союзы и правила расстановки пробелов.

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

const duration = { hours: 2, minutes: 30 };

locales.forEach(locale => {
  const longFormatter = new Intl.DurationFormat(locale, {
    style: "long"
  });

  const shortFormatter = new Intl.DurationFormat(locale, {
    style: "short"
  });

  console.log(locale + ":");
  console.log("  Long:  " + longFormatter.format(duration));
  console.log("  Short: " + shortFormatter.format(duration));
});

// Результат:
// en-US:
//   Long:  2 hours and 30 minutes
//   Short: 2 hr and 30 min
// de-DE:
//   Long:  2 Stunden und 30 Minuten
//   Short: 2 Std. und 30 Min.
// fr-FR:
//   Long:  2 heures et 30 minutes
//   Short: 2 h et 30 min
// ja-JP:
//   Long:  2時間30分
//   Short: 2 時間 30 分

Длинный стиль значительно различается в зависимости от локали, так как в каждом языке есть свои слова для обозначения единиц времени. Например, в немецком используется "Stunden" для часов, во французском — "heures", а в японском — "時間". Форматировщик автоматически учитывает грамматические особенности.

Короткий стиль также адаптируется к правилам локали. В немецком используется "Std." для часов, во французском — "h", а в японском добавляются пробелы между числами и символами единиц. Эти сокращения, зависящие от локали, отражают то, как каждая культура записывает длительности в сокращённой форме.

Форматировщик обрабатывает союзы в соответствии с правилами языка. В английском используется "and", в немецком — "und", во французском — "et", а в японском союзы полностью опускаются. Каждая локаль создаёт естественно выглядящий результат для своего языка.

const locales = ["en-US", "es-ES", "pt-BR"];

const duration = { hours: 1, minutes: 30, seconds: 45 };

locales.forEach(locale => {
  const narrowFormatter = new Intl.DurationFormat(locale, {
    style: "narrow"
  });

  console.log(locale + ": " + narrowFormatter.format(duration));
});

// Результат:
// en-US: 1h 30m 45s
// es-ES: 1h 30min 45s
// pt-BR: 1h 30min 45s

Узкий стиль показывает некоторые различия между локалями. В английском используются одиночные буквы, такие как "h", "m" и "s". В испанском и португальском для минут используется "min" вместо просто "m". Эти различия отражают локальные правила компактного обозначения времени.

Когда использовать длинный стиль

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

Интерфейсы, ориентированные на доступность, выигрывают от длинного стиля, так как программы чтения с экрана произносят полностью написанные слова более естественно. Программа чтения с экрана, произносящая "2 часа и 30 минут", звучит более естественно, чем "2 ч и 30 мин", что может быть прочитано неудобно или требовать специальных правил произношения.

Образовательный контент выигрывает от длинного стиля, так как учащиеся могут быть не знакомы с сокращениями времени. Учебные материалы, объясняющие продолжительность, должны писать единицы времени полностью, чтобы избежать путаницы.

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

Официальные отчёты и документация используют длинный стиль для поддержания единых стандартов написания. Бизнес-отчёты, медицинские записи и официальные документы, как правило, пишут продолжительность времени полностью, а не сокращают её.

Международная аудитория выигрывает от длинного стиля, когда пользователи могут изучать язык. Полностью написанные названия единиц, такие как "часы" и "минуты", легче понять, чем сокращения для тех, кто не является носителем языка.

function formatWorkoutSummary(duration, locale) {
  const formatter = new Intl.DurationFormat(locale, {
    style: "long"
  });

  return formatter.format(duration);
}

const workout = { hours: 1, minutes: 15 };

console.log("Продолжительность тренировки: " + formatWorkoutSummary(workout, "ru-RU"));
// Вывод: "Продолжительность тренировки: 1 час и 15 минут"

Длинный стиль ставит приоритет на понимание, а не на краткость. Используйте его, когда пользователям нужно понять продолжительность без какой-либо двусмысленности или усилий на интерпретацию.

Когда использовать короткий стиль

Краткий стиль лучше всего подходит для контекстов, где важна экономия пространства, но сокращения широко понятны. Это самый распространённый выбор для универсальных приложений.

Мобильные интерфейсы выигрывают от краткого стиля, так как ширина экрана ограничена. Карточки на панели управления, показывающие несколько таймеров, нуждаются в компактных обозначениях длительности, чтобы вместить информацию на экране. Использование "2 ч и 30 мин" вместо "2 часа и 30 минут" экономит 11 символов на каждую длительность, что существенно при отображении нескольких значений.

Элементы управления видеоплеера используют краткий стиль, чтобы показывать длительность без перегрузки интерфейса. Отображение "1 ч и 46 мин" на панели управления более компактно, чем "1 час и 46 минут", при этом остаётся понятным.

Таблицы данных, отображающие длительности в столбцах, требуют одинаковой ширины. Краткие сокращения, такие как "ч", "мин" и "сек", помогают поддерживать управляемую ширину столбцов. Длинные единицы, такие как "часы", "минуты" и "секунды", излишне расширяют столбцы.

Приложения таймеров используют краткий стиль, так как пользователи, проверяющие таймеры, знакомы с сокращениями времени. Таймер обратного отсчёта, показывающий "5 мин и 30 сек", балансирует между ясностью и эффективным использованием пространства.

Интерфейсы бронирования авиабилетов используют краткий стиль для отображения длительности путешествия. Отображение "8 ч и 15 мин" в результатах поиска рейсов более понятно, чем "8ч 15м", но компактнее, чем "8 часов и 15 минут".

function formatFlightDuration(duration, locale) {
  const formatter = new Intl.DurationFormat(locale, {
    style: "short"
  });

  return formatter.format(duration);
}

const flight = { hours: 8, minutes: 15 };

console.log(formatFlightDuration(flight, "en-US"));
// Output: "8 hr and 15 min"

Краткий стиль достигает баланса между ясностью и эффективностью. Большинство пользователей без труда распознают стандартные сокращения, такие как ч, мин и сек.

Когда использовать узкий стиль

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

Компактные виджеты, показывающие одиночные метрики, могут использовать узкий стиль, если размер отображения минимален. Таймер, показывающий "5м 30с" крупным текстом, выглядит лучше, чем "5 минут и 30 секунд".

Визуализации данных с плотной информацией выигрывают от узкого стиля. Подписи к диаграммам, аннотации графиков и наложения данных требуют минимального текста, чтобы не закрывать основное визуальное содержание. Использование "2ч 30м" вместо "2 часа и 30 минут" экономит символы, оставаясь понятным для пользователей, которые понимают контекст.

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

Интерфейсы смарт-часов используют узкий стиль, так как экранное пространство крайне ограничено. Отображение "1ч 15м" на небольшом круглом экране работает лучше, чем более длинные форматы.

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

function formatVideoPlaylist(videos, locale) {
  const formatter = new Intl.DurationFormat(locale, {
    style: "narrow"
  });

  return videos.map(video => ({
    title: video.title,
    duration: formatter.format(video.duration)
  }));
}

const playlist = [
  { title: "Introduction", duration: { minutes: 2, seconds: 30 } },
  { title: "Getting Started", duration: { minutes: 5, seconds: 15 } },
  { title: "Advanced Topics", duration: { hours: 1, minutes: 10 } }
];

console.log(formatVideoPlaylist(playlist, "en-US"));
// Вывод:
// [
//   { title: "Introduction", duration: "2м 30с" },
//   { title: "Getting Started", duration: "5м 15с" },
//   { title: "Advanced Topics", duration: "1ч 10м" }
// ]

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

Совмещение стиля с другими параметрами форматирования

style работает со всеми другими параметрами форматирования длительности. Вы можете управлять отображаемыми единицами времени, выбирая стиль отображения.

const formatter = new Intl.DurationFormat("en-US", {
  style: "long",
  hours: "numeric",
  minutes: "2-digit",
  seconds: "2-digit"
});

console.log(formatter.format({ hours: 1, minutes: 5, seconds: 3 }));
// Вывод: "1:05:03"

Эта комбинация показывает часы в длинном стиле, но использует числовое форматирование с добавлением нулей для минут и секунд. Результат — гибридный формат, сочетающий текст и числа.

Вы можете форматировать только определённые единицы времени, используя единый стиль.

const formatter = new Intl.DurationFormat("en-US", {
  style: "short",
  hours: "numeric",
  minutes: "numeric"
});

console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Вывод: "2 hr and 30 min"

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

Вы можете создавать пользовательские форматы, комбинируя разные стили единиц времени.

const formatter = new Intl.DurationFormat("en-US", {
  hours: "long",
  minutes: "short",
  seconds: "narrow"
});

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45 }));
// Вывод: "1 hour, 30 min, 45s"

Это создаёт смешанный формат, где каждая единица времени использует разный уровень подробности. Хотя это необычно, такая гибкость позволяет создавать специализированные форматы при необходимости.

Что нужно помнить

Опция style управляет тем, как отображаются длительности при форматировании с помощью Intl.DurationFormat. Установите её в "long" для полного написания единиц, например, "2 hours and 30 minutes", в "short" для стандартных сокращений, таких как "2 hr and 30 min", или в "narrow" для компактных форм, таких как "2h 30m". Если параметр не указан, по умолчанию используется "short".

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

Форматировщик автоматически обрабатывает вариации, зависящие от локали, включая разные названия единиц, сокращения, союзы, правила расстановки пробелов и формы множественного числа. Комбинируйте style с другими параметрами форматирования, чтобы управлять отображаемыми единицами времени и их стилем.