125 lines
5.5 KiB
Markdown
125 lines
5.5 KiB
Markdown
---
|
||
title: "⌚ Форматированные строки из объектов Date и Time"
|
||
date: 2023-05-05T23:45:10+03:00
|
||
draft: false
|
||
tags: [javascript, tutorial]
|
||
---
|
||
|
||
Перевод статьи с ресурса
|
||
[gomakethings.com](https://gomakethings.com/how-to-format-date-and-time-strings-with-vanilla-javascript/).
|
||
|
||
## Объект `Intl.DateTimeFormat`
|
||
Объект `Intl.DateTimeFormat` может возвращать из объекта `Date`
|
||
строки с различными опциями форматирования.
|
||
|
||
Чтобы создать объект `Intl.DateTimeFormat` необходимо вызвать конструктор `new Intl.DateTimeFormat()`.
|
||
|
||
В качестве аргумента передаётся языковой стандарт в виде строки или массива строк.
|
||
|
||
**Список форматов:**
|
||
- Строка из двух символов. _Например, `en` для английского языка._
|
||
- Тег и субтег. _Например, `en-US` для английского языка США или `en-GB` для английского языка Великобритании._
|
||
- Несколько подзаголовков. Например, `de-CH-1996` для современного швейцарского варианта немецкого языка.
|
||
|
||
Полный список тегов и субтегов можно найти на
|
||
[IANA Language Subtag Registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).
|
||
|
||
**Пример:**
|
||
|
||
```javascript
|
||
// Create a new Intl.DateTimeFormat object
|
||
let formatter = new Intl.DateTimeFormat('en-US');
|
||
```
|
||
|
||
## Опции форматирования
|
||
|
||
Констроктор `new Intl.DateTimeFormat()` в качестве второго аргумента принимает
|
||
список опций, которые определяют каким образом необходимо отформатировать строку.
|
||
|
||
Опции можно смешивать. Опции `dateStyle` или `timeStyle` можно использовать вместе,
|
||
но нельзя использовать с другими опциями.
|
||
|
||
```javascript
|
||
// Опеределяем, каким образом должна юыть отформтированна дата
|
||
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`.
|
||
|
||
```javascript
|
||
// Создаю объект 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"
|
||
```
|