javascript-intl

了解 JavaScript 中的 Intl 对象

2021 年 3 月 16 日 / 3 月 16 日

📌 学习和使用 Intl 这个 JS 自带的对象，了解其在中文环境下可用的语法

Intl 对象

Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 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。

true false
16:59 下午4:59

year

年份，默认为 numeric。

numeric 2-digit
2021 21

month

月份，默认为 numeric。

numeric 2-digit narrow short long
3 03 3月（M） 3月（Mar） 3月（March）

day hour minute second

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

numeric 2-digit
3 03

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

weekday

星期，默认不显示。

narrow short long
二（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 分为 style 和 type，前者还是输出日期的格式，这里不再展示，后者代表列表的关系是“和”还是“或”。

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 。

参考文章

JavaScriptI18N

Utterances 加载中 ...

Utterances 加载失败，请检查网络