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>"

补充

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

产品规格

Specification	Status	Comment
ECMAScript Internationalization API 4.0 (ECMA-402)The definition of 'Intl.DateTimeFormat.prototype.formatToParts' in that specification.	Draft	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	No support1	51.0 (51.0)	No support	No support	No support

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	No support	No support	56.0 (56.0)	No support	No support	No support

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18