Intl.DateTimeFormat.prototype.formatToParts()
Intl.DateTimeFormat.prototype.formatToParts()
позволяет выполнять форматирование строк с учётом форматирования DateTimeFormat
.Синтаксис
Intl.DateTimeFormat.prototype.formatToParts(date)
Параметры
date
Необязательный-
Дата, которую нужно отформатировать.
Возвращаемое значение
Массив объектов Array
, содержащий отформатированную дату по частям.
Описание
Метод formatToParts()
полезен для пользовательского форматирования строки даты. Он возвращает массив объектов Array
, содержащий специфичные для данного места токены, из которых можно выстроить пользовательскую строку, которая сохранит специфичные для данного места части. Структура возвращаемого значения методом formatToParts()
выглядит так:
[
{ type: 'day', value: '17' },
{ type: 'weekday', value: 'Monday' }
]
Возможные типы:
- day
-
Строка, используемая для дня, например,
"17"
. - dayPeriod
-
Строка, используемая для времени суток, например,
"AM"
или"PM"
. - era
-
Строка, используемая для эры, например,
"BC"
или"AD"
. - hour
-
Строка, используемая для часа, например,
"3"
или"03"
. - literal
-
Строка, используемая для разделения значений даты и времени, например,
"/"
,","
,"o'clock"
,"de"
и другие. - minute
-
Строка, используемая для минут, например,
"00"
. - month
-
Строка, используемая для месяца, например,
"12"
. - second
-
Строка, используемая для секунд, например,
"07"
или"42"
. - timeZoneName
-
Строка, используемая для названия временной зоны, например,
"UTC"
. - weekday
-
Строка, используемая для дня недели, например,
"M"
,"Monday"
или"Montag"
. - year
-
Строка, используемая для года, например,
"2012"
или"96"
.
Примеры
DateTimeFormat
выводит локализированные строки, которые нельзя изменять напрямую:
var date = Date.UTC(2012, 11, 17, 3, 0, 42);
var formatter = new Intl.DateTimeFormat('ru', {
weekday: 'long',
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hour12: true,
timeZone: 'UTC'
});
formatter.format(date);
// "понедельник, 17.12.2012 г., 3:00:42 AM"
Однако, во многих пользовательских интерфейсах есть желание настроить форматирование этой строки. Метод formatToParts
включает форматирование строки с учётом местности, созданной форматером DateTimeFormat
, предоставляя вам строку по частям:
formatter.formatToParts(date);
// возвращаемое значение:
[
{ type: 'weekday', value: 'понедельник'},
{ type: 'literal', value: ', ' },
{ type: 'day', value: '17' },
{ type: 'literal', value: '.' },
{ type: 'month', value: '12' },
{ type: 'literal', value: '.' },
{ type: 'year', value: '2012' },
{ type: 'literal', value: 'г., ' },
{ type: 'hour', value: '3' },
{ type: 'literal', value: ':' },
{ type: 'minute', value: '00' },
{ type: 'literal', value: ':' },
{ type: 'second', value: '42' },
{ type: 'literal', value: ' ' },
{ type: 'dayPeriod', value: 'AM' }
]
Теперь информация доступна по отдельности и может быть отформатирована и объединена снова в пользовательском порядке. Например, используя Array.prototype.map()
, стрелочные функции, инструкцию switch, шаблонные строки и Array.prototype.reduce()
.
var dateString = formatter.formatToParts(date).map(({type, value}) => {
switch (type) {
case 'dayPeriod': return `<b>${value}</b>`;
default : return value;
}
}).reduce((string, part) => string + part);
Здесь время суток будет выделено жирным с использованием метода formatToParts()
.
console.log(formatter.format(date));
// "понедельник, 17.12.2012 г., 3:00:42 AM"
console.log(dateString);
// "понедельник, 17.12.2012 г., 3:00:42 <b>AM</b>"
Полифил
Полифил для данного метода доступен здесь.
Спецификации
Specification |
---|
ECMAScript Internationalization API Specification # sec-Intl.DateTimeFormat.prototype.formatToParts |
Совместимость с браузерами
BCD tables only load in the browser