浏览器的内置国际化API

0.写在前

浏览器的内置国际化API是指 Intl API，包括以下几个对象和方法：

1. Intl.DateTimeFormat：用于格式化日期和时间。

2. Intl.NumberFormat：用于格式化数字。

3. Intl.Collator：用于比较字符串的顺序。

4. Intl.ListFormat：用于格式化列表。

5. Intl.PluralRules：用于根据数量选择正确的单复数形式。

6. Intl.RelativeTimeFormat：用于格式化相对时间，比如“1天前”、“2小时后”等。

通过使用这些API，可以根据用户的本地化信息，自动显示对应语言版本的内容。

1.Intl.DateTimeFormat

Intl.DateTimeFormat 对象用于格式化日期和时间。它的构造函数接受两个参数，第一个参数是语言标记，表示要格式化的语言，第二个参数是选项对象，用于指定格式化的样式。

常用选项包括：

• locale：语言标记，用于指定要格式化的语言。
• dateStyle：日期样式，可以是 short、medium、long、full 中的一个，用于指定日期的格式。
• timeStyle：时间样式，可以是 short、medium、long、full 中的一个，用于指定时间的格式。
• timeZone：时区，用于指定要格式化的时区。

示例代码：

const date = new Date();

const options = { dateStyle: 'medium', timeStyle: 'short' }; 

console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// Sep 28, 2023, 8:50 AM

2.Intl.NumberFormat

Intl.NumberFormat 对象用于格式化数字。它的构造函数接受两个参数，第一个参数是语言标记，表示要格式化的语言，第二个参数是选项对象，用于指定格式化的样式。

常用选项包括：

• locale：语言标记，用于指定要格式化的语言。
• style：数字样式，可以是 decimal、percent、currency 中的一个，用于指定数字的格式。
• currency：货币代码，用于指定要格式化的货币代码。
• minimumFractionDigits：最小小数位数，用于指定数字的最小小数位数。
• maximumFractionDigits：最大小数位数，用于指定数字的最大小数位数。

示例代码：

const number = 123456.789;

const options = { style: 'currency', currency: 'USD' };

console.log(new Intl.NumberFormat('en-US', options).format(number));
// $123,456.79

3.Intl.Collator

Intl.Collator 对象用于比较字符串的顺序。它的构造函数接受一个参数，表示要比较的语言。

常用方法包括：

• compare：用于比较两个字符串的顺序，返回一个数字，表示两个字符串的大小关系。

示例代码：

const strings = ['apple', 'banana', 'cherry'];

const collator = new Intl.Collator('en-US');

console.log(strings.sort(collator.compare));
// ["apple", "banana", "cherry"]

4.Intl.ListFormat

Intl.ListFormat 对象用于格式化列表。它的构造函数接受一个参数，表示要格式化的语言。

常用选项包括：

• style：列表样式，可以是 long、short、narrow 中的一个，用于指定列表的样式。
• type：列表类型，可以是 disjunction、conjunction、unit 中的一个，用于指定列表的类型。

常用方法包括：

• format：用于格式化一个数组，返回一个字符串，表示格式化后的列表。

示例代码：

const items = ['apple', 'banana', 'cherry'];

const options = { style: 'long', type: 'conjunction' };

console.log(new Intl.ListFormat('en-US', options).format(items));
// apple, banana, and cherry

5.Intl.PluralRules

Intl.PluralRules 对象用于根据数量选择正确的单复数形式。它的构造函数接受一个参数，表示要格式化的语言。

常用方法包括：

• select：用于根据数量选择正确的单复数形式，返回一个字符串，表示选择的单复数形式。

示例代码：

const rules = new Intl.PluralRules('en-US');

console.log(rules.select(1));
// one

console.log(rules.select(2));
// other

6.Intl.RelativeTimeFormat

Intl.RelativeTimeFormat 对象用于格式化相对时间，比如“1天前”、“2小时后”等。它的构造函数接受一个参数，表示要格式化的语言。

常用方法包括：

• format：用于格式化一个时间间隔，返回一个字符串，表示格式化后的相对时间。

示例代码：

const formatter = new Intl.RelativeTimeFormat('en-US');

console.log(formatter.format(-1, 'day'));
// 1 day ago
console.log(formatter.format(2, 'hour'));
// in 2 hours

7.总结

Intl API 是 ECMAScript Internationalization API 的缩写，是由 ECMAScript 国际化标准引入的，在现代浏览器中得到了支持。具体来说，以下浏览器支持 Intl API：

• Chrome 24 及以上版本
• Firefox 29 及以上版本
• Safari 10.0 及以上版本
• Edge 12 及以上版本
• Opera 15 及以上版本
• iOS Safari 10.0 及以上版本
• Android Browser 5.0 及以上版本
• Chrome for Android 59 及以上版本
• Firefox for Android 55 及以上版本

需要注意的是，旧版的浏览器可能不支持 Intl API，因此在使用时需要进行兼容处理，可以使用 polyfill 或者第三方库来实现。