Intl.DateTimeFormat.prototype.formatToParts()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
Метод 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