javascript-intl

了解 JavaScript 中的 Intl 对象

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

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

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

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

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 分为 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

参考文章

Utterances 加载中 ...

Utterances 加载失败,请检查网络