Как отображать длительность в краткой или полной форме
Используйте опцию style, чтобы управлять тем, как длительность отображается: сокращённо, полностью или в виде компактных символов
Введение
Когда вы показываете, сколько что-то занимает времени, формат занимает разное пространство. Длительность тренировки 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("en-US", {
style: "long"
});
console.log(longFormatter.format(duration));
// Output: "1 hour and 30 minutes"
const shortFormatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(shortFormatter.format(duration));
// Output: "1 hr and 30 min"
const narrowFormatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(narrowFormatter.format(duration));
// Output: "1h 30m"
Опция style по умолчанию устанавливается в "short", если вы её не укажете. Это значит, что форматирование длительности будет использовать стандартные сокращения, если вы явно не выберете другой стиль отображения.
Форматирование длительности в длинном стиле
Длинный стиль полностью прописывает названия единиц. Такой формат обеспечивает максимальную ясность, но требует больше места по горизонтали.
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// Output: "2 hours and 30 minutes"
Форматтер автоматически различает единственное и множественное число. Для одного часа используется форма "час", для нескольких — "часы". Вам не нужно самостоятельно определять нужную форму.
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(formatter.format({ hours: 1, minutes: 30 }));
// Output: "1 hour and 30 minutes"
console.log(formatter.format({ hours: 2, minutes: 1 }));
// Output: "2 hours and 1 minute"
Каждый тип единицы всегда пишется полностью, независимо от количества единиц в длительности.
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Output: "2 hours, 30 minutes and 45 seconds"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 minutes and 30 seconds"
console.log(formatter.format({ hours: 1, minutes: 0, seconds: 15 }));
// Output: "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));
// Output: "2 hr and 30 min"
Форматтер использует общеизвестные сокращения. Часы становятся "ч", минуты — "мин", секунды — "с". Эти сокращения сохраняют читаемость и уменьшают количество символов.
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1 hr, 46 min and 40 sec"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 min and 30 sec"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3 hr and 15 min"
Короткий стиль используется по умолчанию. Если вы не укажете опцию style, форматтер автоматически применит короткий стиль.
const formatter = new Intl.DurationFormat("en-US");
console.log(formatter.format({ hours: 2, minutes: 30 }));
// Output: "2 hr and 30 min"
Это поведение по умолчанию делает короткий стиль удобным, если вам нужны стандартные сокращённые длительности без явного указания стиля.
Вы можете форматировать разные типы длительности в кратком стиле, чтобы увидеть стандартные сокращения.
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2 days and 5 hr"
console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1 wk and 3 days"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "1 hr, 30 min, 45 sec and 500 ms"
Каждый тип единицы использует своё стандартное сокращение. Дни остаются как «дни», недели — «нед.», а миллисекунды — «мс». Эти сокращения широко известны и подходят для большинства случаев.
Форматирование длительности в узком стиле
Узкий стиль даёт максимально компактное представление. В этом формате убираются пробелы и используются минимальные символы, чтобы сэкономить каждый знак.
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// Output: "2h 30m"
Форматтер использует однобуквенные сокращения и минимум пробелов. Часы становятся «ч», минуты — «м», секунды — «с». Такой вывод намного компактнее, чем в кратком или полном стиле.
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1h 46m 40s"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5m 30s"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3h 15m"
Разные единицы дают разные узкие обозначения по стандартным правилам.
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2d 5h"
console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1w 3d"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "1h 30m 45s 500ms"
Узкий стиль лучше всего подходит, когда место очень ограничено и пользователи знакомы с контекстом измерения времени. Такой сжатый формат предполагает, что пользователи смогут понять единицы без явных разделителей или пояснений.
Сравнение полного, краткого и узкого стилей
Различия между тремя стилями становятся очевидны, когда вы форматируете одну и ту же длительность в каждом из них.
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("Long: " + longFormatter.format(duration));
console.log("Short: " + shortFormatter.format(duration));
console.log("Narrow: " + narrowFormatter.format(duration));
// Output:
// Long: 1 hour, 30 minutes and 45 seconds
// Short: 1 hr, 30 min and 45 sec
// Long: 1h 30m 45s
Полный стиль использует полные слова и явные союзы. Краткий стиль — стандартные сокращения с союзами. Узкий стиль — однобуквенные обозначения с минимумом пробелов. Эта последовательность показывает компромисс между наглядностью и экономией места.
Вы можете сравнить разные длительности, чтобы увидеть, как каждый стиль справляется с разными временными промежутками.
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("Duration:");
console.log(" Long: " + long);
console.log(" Short: " + short);
console.log(" Narrow: " + narrow);
console.log("");
});
// Output:
// Duration:
// Long: 2 hours and 15 minutes
// Short: 2 hr and 15 min
// Narrow: 2h 15m
//
// Duration:
// Long: 5 minutes and 30 seconds
// Short: 5 min and 30 sec
// Narrow: 5m 30s
//
// Duration:
// Long: 1 hour, 0 minutes and 10 seconds
// Short: 1 hr, 0 min and 10 sec
// Narrow: 1h 0m 10s
//
// Duration:
// Long: 1 day, 3 hours and 45 minutes
// Short: 1 day, 3 hr and 45 min
// Narrow: 1d 3h 45m
Разница в количестве символов становится заметной при отображении нескольких длительностей. В таблице или списке с множеством значений узкий стиль экономит много горизонтального пространства по сравнению с полным стилем.
Как стили отображения длительности различаются в разных языках
Все три варианта стиля адаптируются под выбранную локаль. В разных языках используются разные сокращения, названия единиц, союзы и правила расстановки пробелов.
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));
});
// Output:
// 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));
});
// Output:
// 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("Workout duration: " + formatWorkoutSummary(workout, "en-US"));
// Output: "Workout duration: 1 hour and 15 minutes"
Длинный стиль ставит понимание выше краткости. Используйте его, когда пользователям важно безошибочно и без лишних усилий понять длительность.
Когда использовать короткий стиль
Короткий стиль лучше всего подходит для ситуаций, где важна экономия места, а сокращения всем понятны. Это самый распространённый выбор для универсальных приложений.
Мобильные интерфейсы выигрывают от короткого стиля, потому что ширина экрана ограничена. На карточках дашборда с несколькими таймерами компактные обозначения позволяют уместить больше информации. Например, «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"));
// Output:
// [
// { title: "Introduction", duration: "2m 30s" },
// { title: "Getting Started", duration: "5m 15s" },
// { title: "Advanced Topics", duration: "1h 10m" }
// ]
Узкий стиль предполагает, что пользователи знакомы с обозначениями времени и могут понять единицы без пояснений. Этот вариант жертвует понятностью ради максимальной экономии места.
Комбинируйте стиль с другими параметрами форматирования
Опция 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 }));
// Output: "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 }));
// Output: "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 }));
// Output: "1 hour, 30 min, 45s"
Это создаёт смешанный формат, где для каждой единицы используется разный уровень подробности. Хотя это необычно, такая гибкость позволяет создавать специальные форматы при необходимости.
Что важно помнить
Опция style определяет, как будет выглядеть длительность при форматировании с помощью Intl.DurationFormat. Установите её в "long" для полного написания единиц, например, «2 часа 30 минут», "short" для стандартных сокращений, например, «2 ч 30 мин», или "narrow" для компактных форм, например, «2ч 30м». По умолчанию используется "short", если не указано иное.
Используйте длинный стиль, когда важны понятность и доступность, или если пользователи могут не знать сокращений времени. Короткий стиль подходит для большинства случаев, когда важно сэкономить место и пользователи понимают стандартные сокращения. Узкий стиль используйте только в очень ограниченных по месту интерфейсах, где пользователи хорошо знакомы с обозначениями времени.
Форматтер автоматически обрабатывает вариации, зависящие от локали, включая разные названия единиц, сокращения, союзы, правила расстановки пробелов и формы множественного числа. Комбинируйте style с другими параметрами форматирования, чтобы управлять тем, какие единицы отображаются и как они выглядят.