了解 JavaScript 中的 Intl 对象及其常用方法

学习和使用 Intl 这个 JavaScript 对象,了解其在中文环境下的一些方法。

CC-BY-SA-4.0

Intl 对象

Intl 对象是 ECMAScript 国际化 API 的一个命名空间,它提供了精确的字符串对比、数字格式化,和日期时间格式化。CollatorNumberFormatDateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了这些属性,以及国际化使用的构造器和其他语言的方法等常见的功能。

引用来源:Intl - JavaScript | MDN

兼容性

Can I Use

通过查询 Can I Use 来看,兼容性还是可以的。

方法

Intl.DateTimeFormat

用来格式化日期。

const date = new Date();
const locale = window.navigator.language;
// locale: zh-CN

new Intl.DateTimeFormat(locale).format(date);
// "2021/3/16"

new Intl.DateTimeFormat('en-US').format(date);
// "3/16/2021"

new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date);
// "R3/3/16"

Intl.DateTimeFormat 可以接受一个 Option,用来自定义日期格式。如果不传入配置,默认只显示 year month day 这三个,且默认值均为 numeric

new Intl.DateTimeFormat('en-US', {
  year: '2-digit',
  month: 'short',
  day: '2-digit',
  hour: 'numeric',
  minute: 'numeric',
  weekday: 'long',
  hour12: true,
}).format(new Date());
// Tuesday, Mar 16, 21, 4:49 PM
new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  weekday: 'short',
  hour12: false,
}).format(new Date());
// '2021/3/16周二 16:53'

部分常用配置在中文语境下的效果如下。

hour12

是否采用 12 小时制,中文下默认为 true

truefalse
16:59下午4:59

year

年份,默认为 numeric

numeric2-digit
202121

month

月份,默认为 numeric

numeric2-digitnarrowshortlong
3033月(M)3月(Mar)3月(March)

day hour minute second

分别为日期、小时、分钟、秒,其中日期默认为 numeric,其他默认不显示。

numeric2-digit
303

在测试中发现,minutesecond 两个始终为两位数字,不符合上面表格,原因有待研究。

weekday

星期,默认不显示。

narrowshortlong
二(T)周二(Tue)星期二(Tuesday)

更多用法可以参考 Intl.DateTimeFormat - JavaScript | MDN

Intl.RelativeTimeFormat

用来计算相对日期,比如 X 分钟前、X 天前这种。

const rtf = new Intl.RelativeTimeFormat('en-US', {
  numeric: 'always',
  style: 'long',
});

rtf.format(-1, 'day');
// "1 day ago"

rtf.format(1, 'day');
// "in 1 day"

这个方法同样可以添加配置,其中 numeric 代表是否使用数字,style 代表时间的格式,对中文来说没影响。

new Intl.RelativeTimeFormat('zh-CN', {
  numeric: 'always',
  style: 'long',
}).format(-1, 'day');
// '1天前'

new Intl.RelativeTimeFormat('zh-CN', {
  numeric: 'auto',
  style: 'long',
}).format(-1, 'day');
// '昨天'

format 可用的单位有 year quarter month week day hour minute second

new Intl.RelativeTimeFormat('zh-CN', {
  numeric: 'auto',
  style: 'long',
}).format(0, 'second');
// '现在'

更多用法可以参考 Intl.RelativeTimeFormat - JavaScript | MDN 以及 Intl.RelativeTimeFormat.prototype.format() - JavaScript | MDN 。尽量看英文版的,中文版没更新,不全。

Intl.ListFormat

用来格式化一个自然语言描述的列表,比如苹果、橘子和香蕉这种。

new Intl.ListFormat('en-US').format(['Hello', '你好', '123456', '@@@']);
// 'Hello, 你好, 123456, and @@@'

new Intl.ListFormat('zh-CN').format(['Hello', '你好', '123456', '@@@']);
// 'Hello、你好、123456和@@@'

这个方法的 Option 分为 styletype,前者还是输出日期的格式,这里不再展示,后者代表列表的关系是「和」还是「或」。

new Intl.ListFormat('zh-CN', { type: 'disjunction' }).format(['Hello', '你好', '123456']);
// 'Hello、你好或123456'

new Intl.ListFormat('zh-CN', { type: 'conjunction' }).format(['Hello', '你好', '123456']);
// 'Hello、你好和123456'

更多用法可以参考 Intl.ListFormat - JavaScript | MDN

Intl.NumberFormat

格式化数字相关的内容,比如货币、数字分隔符、单位等等。

new Intl.NumberFormat('zh-CN').format(1234567890);
// '1,234,567,890'

new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(1234567890);
// '一,二三四,五六七,八九〇'

new Intl.NumberFormat('en-US').format(1234567890);
// '1,234,567,890'

new Intl.NumberFormat('de-DE').format(1234567890);
// '1.234.567.890'
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(123465.789);
// '$123,465.79'

new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(123465.789);
// '¥123,465.79'

更多用法可以参考 Intl.NumberFormat - JavaScript | MDN

Intl.PluralRules

复数相关的格式化,比如 dog 和 dogs,由于中文不在乎复数,所以这节省略,用法可以参考 Intl.PluralRules - JavaScript | MDN

Intl.DisplayNames

把某些字符转换成指定语言。

new Intl.DisplayNames(['en'], { type: 'region' }).of('JP');
// 'Japan'

new Intl.DisplayNames(['zh-CN'], { type: 'region' }).of('JP');
// '日本'

更多用法可以参考 Intl.DisplayNames() constructor - JavaScript | MDN

参考文章