Intl.dateTimeFormat.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” 。

literalThe串","，"o'clock"，"de"，etc.

minuteThe用于分钟字符串，例如“00”。

month用于当月的字符串，例如“12”。

second用于第二个字符串的字符串，例如“07”或“42”。

timeZoneName用于时区名称的字符串，例如“UTC”。

weekday使用的字符串例如“M”，“Monday”或“Montag”。年份字符串，例如“2012”或“96”。

例子

DateTimeFormat 输出本地化，内部的字符串不能被直接操作：

var date = Date.UTC(2012, 11, 17, 3, 0, 42);

var formatter = new Intl.DateTimeFormat('en-us', {
  weekday: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hour12: true,
  timeZone: 'UTC'
});

formatter.format(date);
// "Monday, 12/17/2012, 3:00:42 AM"

但是，在许多用户界面中，需要定制该字符串的格式。该formatToParts方法DateTimeFormat通过为您提供部分字符串来启用由格式化器生成的字符串：

formatter.formatToParts(date);

// return value: 
[ 
  { type: 'weekday',   value: 'Monday' }, 
  { type: 'literal',   value: ', '     }, 
  { type: 'month',     value: '12'     }, 
  { type: 'literal',   value: '/'      }, 
  { type: 'day',       value: '17'     }, 
  { 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(), arrow functions，switch语句，模板和Array.prototype.reduce()。

var dateString = formatter.formatToParts(date).map(({type, value}) => { 
  switch (type) {
    case 'dayPeriod': return `<strong>${value}</strong>`; 
    default : return value; 
  } 
}).reduce((string, part) => string + part);

在使用该formatToParts()方法时，这将使得data更加突出。

console.log(formatter.format(date));
// "Monday, 12/17/2012, 3:00:42 AM"

console.log(dateString);
// "Monday, 12/17/2012, 3:00:42 <strong>AM</strong>"

补充

提案库中提供了此功能的一些补充。

产品规格

浏览器兼容性