Как форматировать время: короткий, средний, длинный и полный стили

Введение

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

В JavaScript Intl.DateTimeFormat предлагает предустановленные стили, которые объединяют часто используемые варианты форматирования в простые опции. Вместо того чтобы указывать числовые часы, минуты и секунды по отдельности, вы можете выбрать timeStyle: "medium". Вместо раздельной настройки отображения часов и минут — просто используйте timeStyle: "short".

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

Что такое timeStyle

Параметр timeStyle определяет, как будет отображаться время. Он влияет на то, какие компоненты времени будут показаны и насколько подробно. Этот параметр принимает четыре значения: "short", "medium", "long" и "full".

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

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

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Output: "2:30 PM"

Одна эта опция заменяет настройку множества отдельных параметров компонентов.

Понимание четырёх уровней стиля

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

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

Стиль "medium" добавляет секунды для большей точности. Информация о часовом поясе по-прежнему не отображается, но время указывается вплоть до секунды.

Стиль "long" добавляет сокращённую информацию о часовом поясе. Включает часы, минуты, секунды и короткий код часового пояса, например PST или GMT.

Стиль "full" даёт самое полное представление. Включает все компоненты времени с полностью написанным названием часового пояса, например Pacific Standard Time.

Конкретные компоненты и форматирование для каждого стиля зависят от локали. Например, американский английский обычно использует 12-часовой формат с AM/PM, а немецкий — 24-часовой. При этом уровень детализации остаётся одинаковым для всех языков.

Форматируйте время с помощью timeStyle

Опция timeStyle управляет форматированием времени. Каждый уровень стиля выдаёт разный результат для одного и того же времени.

const date = new Date("2025-03-15T14:30:45");

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

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium"
});

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

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "2:30 PM"

console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"

console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"

console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"

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

Комбинируйте dateStyle и timeStyle

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

const date = new Date("2025-03-15T14:30:45");

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "short"
});

console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"

Дата отображается в длинном формате, а время — в коротком. Такое сочетание даёт подробный контекст по дате и при этом делает время лаконичным.

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

const date = new Date("2025-03-15T14:30:45");

const combinations = [
  { dateStyle: "short", timeStyle: "short" },
  { dateStyle: "medium", timeStyle: "medium" },
  { dateStyle: "long", timeStyle: "long" },
  { dateStyle: "full", timeStyle: "full" }
];

combinations.forEach(options => {
  const formatter = new Intl.DateTimeFormat("en-US", options);
  console.log(formatter.format(date));
});

// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

Использование одинаковых уровней стиля обеспечивает одинаковую детализацию для даты и времени. Смешивание стилей позволяет выделить один из аспектов.

Как стили времени различаются в разных локалях

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

const date = new Date("2025-03-15T14:30:45");

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

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "short"
  });

  const longFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Long:  ${longFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 2:30 PM
//   Long:  2:30:45 PM PST
// de-DE:
//   Short: 14:30
//   Long:  14:30:45 PST
// fr-FR:
//   Short: 14:30
//   Long:  14:30:45 UTC−8
// ja-JP:
//   Short: 14:30
//   Long:  14:30:45 PST

В американском английском используется 12-часовой формат с AM/PM. В немецком, французском и японском — 24-часовой. Длинный стиль добавляет информацию о часовом поясе с форматированием, подходящим для каждой локали.

Эти различия отражают культурные особенности отображения времени. API автоматически учитывает эти нюансы на основе идентификатора локали.

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

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "short"
});

const meetings = [
  { title: "Team standup", time: new Date("2025-03-15T09:00:00") },
  { title: "Client call", time: new Date("2025-03-15T14:30:00") },
  { title: "Code review", time: new Date("2025-03-15T16:45:00") }
];

meetings.forEach(meeting => {
  console.log(`${meeting.title}: ${formatter.format(meeting.time)}`);
});

// Output:
// Team standup: 9:00 AM
// Client call: 2:30 PM
// Code review: 4:45 PM

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

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

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

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "medium"
});

const activities = [
  { action: "User logged in", time: new Date("2025-03-15T09:15:23") },
  { action: "File uploaded", time: new Date("2025-03-15T09:18:47") },
  { action: "Settings updated", time: new Date("2025-03-15T09:22:11") }
];

activities.forEach(activity => {
  console.log(`${activity.action}: ${formatter.format(activity.time)}`);
});

// Output:
// User logged in: 9:15:23 AM
// File uploaded: 9:18:47 AM
// Settings updated: 9:22:11 AM

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

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

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

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "long",
  timeZone: "America/New_York"
});

const events = [
  { name: "Webinar starts", time: new Date("2025-03-15T14:00:00") },
  { name: "Registration closes", time: new Date("2025-03-15T13:30:00") }
];

events.forEach(event => {
  console.log(`${event.name}: ${formatter.format(event.time)}`);
});

// Output:
// Webinar starts: 2:00:00 PM EST
// Registration closes: 1:30:00 PM EST

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

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

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

Полный стиль даёт максимально подробное представление времени. Он полностью прописывает название часового пояса, полностью устраняя неоднозначность относительно того, к какому часовому поясу относится время.

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full",
  timeStyle: "full"
});

const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

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

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

Понимание ограничений

Опция timeStyle не может использоваться вместе с отдельными опциями компонентов времени. Нужно выбрать между использованием готовых стилей или индивидуальной настройкой компонентов.

Так не сработает:

const formatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium",
  hour: "2-digit"  // Error: cannot combine
});

Опция timeStyle уже определяет форматирование часов. Добавление явной опции hour создаёт конфликт. Такое же ограничение действует и для других опций компонентов, например, minute, second или timeZoneName.

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

const formatter = new Intl.DateTimeFormat("en-US", {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit"
});

console.log(formatter.format(new Date("2025-03-15T14:30:45")));
// Output: "02:30:45 PM"

Можно использовать dateStyle и timeStyle вместе, так как они отвечают за разные аспекты форматирования. Их также можно комбинировать с опциями, которые не конфликтуют, например, timeZone, calendar или numberingSystem.

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "long",
  timeZone: "America/New_York"
});

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Output: "March 15, 2025 at 2:30:45 PM EST"

Форматируйте время под локаль пользователя

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "short"
});

const time = new Date("2025-03-15T14:30:00");
console.log(formatter.format(time));
// Output varies by user's locale
// For en-US: "2:30 PM"
// For de-DE: "14:30"
// For fr-FR: "14:30"

Вы также можете передать весь массив navigator.languages, чтобы включить поведение с резервным вариантом. Форматтер использует первую поддерживаемую локаль из массива.

const formatter = new Intl.DateTimeFormat(navigator.languages, {
  timeStyle: "medium"
});

Используйте форматтеры повторно для повышения производительности

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "short"
});

const times = [
  new Date("2025-03-15T09:00:00"),
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-15T16:45:00")
];

times.forEach(time => {
  console.log(formatter.format(time));
});
// Output:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"

Этот подход повышает производительность при форматировании массивов времени или отображении множества временных меток в интерфейсе пользователя.

Что важно помнить

Опция timeStyle предоставляет предустановленные уровни форматирования: "short", "medium", "long" и "full". Каждый уровень — это разный баланс между краткостью и детализацией. Краткий показывает часы и минуты, средний добавляет секунды, длинный — сокращённый часовой пояс, а полный — полные названия часовых поясов.

Используйте эти пресеты вместо ручной настройки отдельных компонентов времени. Пресеты дают корректный результат для любой локали без необходимости разбираться в правилах форматирования.

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

Форматируйте время, используя локаль пользователя из navigator.language, чтобы отображать время так, как ожидает каждый пользователь. Для повышения производительности используйте экземпляры форматтера повторно при множественном форматировании.