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

Введение

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

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")));
// Вывод: "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));
// Вывод: "2:30 PM"

console.log(mediumFormatter.format(date));
// Вывод: "2:30:45 PM"

console.log(longFormatter.format(date));
// Вывод: "2:30:45 PM PST"

console.log(fullFormatter.format(date));
// Вывод: "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));
// Вывод: "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));
});

// Вывод:
// "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)}`);
});

// Результат:
// 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: "Командное совещание", time: new Date("2025-03-15T09:00:00") },
  { title: "Звонок с клиентом", time: new Date("2025-03-15T14:30:00") },
  { title: "Код-ревью", time: new Date("2025-03-15T16:45:00") }
];

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

// Результат:
// Командное совещание: 9:00 AM
// Звонок с клиентом: 2:30 PM
// Код-ревью: 4:45 PM

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

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

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

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

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

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

const activities = [
  { action: "Пользователь вошел в систему", time: new Date("2025-03-15T09:15:23") },
  { action: "Файл загружен", time: new Date("2025-03-15T09:18:47") },
  { action: "Настройки обновлены", time: new Date("2025-03-15T09:22:11") }
];

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

// Вывод:
// Пользователь вошел в систему: 9:15:23 AM
// Файл загружен: 9:18:47 AM
// Настройки обновлены: 9:22:11 AM

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

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

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

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

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

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

const events = [
  { name: "Начало вебинара", time: new Date("2025-03-15T14:00:00") },
  { name: "Закрытие регистрации", time: new Date("2025-03-15T13:30:00") }
];

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

// Вывод:
// Начало вебинара: 2:00:00 PM EST
// Закрытие регистрации: 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));
// Вывод: "суббота, 15 марта 2025 г., 14:30:45 по тихоокеанскому стандартному времени"

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

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

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

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

Это не сработает:

const formatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium",
  hour: "2-digit"  // Ошибка: нельзя комбинировать
});

Опция 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")));
// Вывод: "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")));
// Вывод: "15 марта 2025 г., 14:30:45 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));
// Вывод зависит от локали пользователя
// Для en-US: "2:30 PM"
// Для de-DE: "14:30"
// Для 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));
});
// Вывод:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"

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

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

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

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

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

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