⌚ Форматированные строки из объектов Date и Time

Опубликовано: 5 мая 2023 г.

🏷️ javascript 🏷️ tutorial

Перевод статьи с ресурса gomakethings.com.

Объект `Intl.DateTimeFormat`

Объект Intl.DateTimeFormat может возвращать из объекта Date строки с различными опциями форматирования.

Чтобы создать объект Intl.DateTimeFormat необходимо вызвать конструктор new Intl.DateTimeFormat().

В качестве аргумента передаётся языковой стандарт в виде строки или массива строк.

Список форматов:

Строка из двух символов. Например, en для английского языка.
Тег и субтег. Например, en-US для английского языка США или en-GB для английского языка Великобритании.
Несколько подзаголовков. Например, de-CH-1996 для современного швейцарского варианта немецкого языка.

Полный список тегов и субтегов можно найти на IANA Language Subtag Registry.

Пример:

// Create a new Intl.DateTimeFormat object
let formatter = new Intl.DateTimeFormat('en-US');

Опции форматирования

Констроктор new Intl.DateTimeFormat() в качестве второго аргумента принимает список опций, которые определяют каким образом необходимо отформатировать строку.

Опции можно смешивать. Опции dateStyle или timeStyle можно использовать вместе, но нельзя использовать с другими опциями.

// Опеределяем, каким образом должна юыть отформтированна дата
let formatter = new Intl.DateTimeFormat('en-US', {
    // Стиль форматирования для даты
    // Может использоваться с timeStyle, но не с другими опциями
    // 'full' (по умолчанию), 'long', 'medium', 'short'
    dateStyle: 'full',

    // Стиль форматирования для времени
    // Может использоваться с dateStyle, но не с другими опциями
    // 'full' (по умолчанию), 'long', 'medium', 'short'
    timeStyle: 'full',

    // Если true, используется 12 часовой формат времени
    // Значение по умолчанию зависит от локали
    hour12: true,

    // Как отформатировать время суток (am, morning и т.д.)
    // Работает только если используются 12-часовой формат времени
    // 'narrow', 'short', или 'long'
    dayPeriod: 'narrow',

    // Стиль форматирования дней недели
    // 'long' ("Четверг"), 'short' ("Чт"), 'narrow' ("Ч")
    weekday: 'long',

    // Стиль форматирования эпохт
    // 'long' ("Anno Domini"), 'short' ("AD"), 'narrow' ("A")
    era: 'short',

    // Стиль форматирования года
    // 'numeric' ("2023"), '2-digit' ("23")
    year: 'numeric',

    // Стиль форматирования месяца
    // 'numeric' ("3"), '2-digit' ("03"), 'long' ("Март"), 'short' ("Мар"), 'narrow' ("М")
    month: 'long',

    // Стиль форматирования дня месяца
    // 'numeric' ("1"), '2-digit' ("01")
    day: 'numeric',

    // Стиль форматирования часов
    // 'numeric', '2-digit'
    hour: 'numeric',

    // Стиль форматирования минут
    // 'numeric', '2-digit'
    minute: 'numeric',

    // Стиль форматирования секунд
    // 'numeric', '2-digit'
    second: 'numeric',

    // Количество цифр, отоброжаемых в долях секунд
    // от 0 до 3
    fractionalSecondDigits: 0,

    // Стиль форматирования часвого пояса
    // 'long' ("Eastern Standard Time"), 'short' ("EST"), 'shortOffset' ("GMT-5"), 'longOffset' ("GMT-0500"), 'shortGeneric' ("ET"), 'longGeneric' ("Eastern Time")
    timeZoneName: 'short'
});

Пример форматирования даты

Как только определены параметры форматирования объекта Intl.DateTimeFormat необходимо вызвать метод format() и передать в качестве аргумента объект Date.

// Создаю объект Intl.DateTimeFormat
let formatter = new Intl.DateTimeFormat('en-US', {
    dateStyle: 'medium',
    timeStyle: 'short' 
});

// Создаю объект Date
let date = new Date('2023-10-31T22:00:00');

// Форматирую дату в строку
let halloween = formatter.format(date);

console.log(halloween); // "Oct 31, 2023, 10:00 PM"