浅析JS里的Intl对象及常用方法使用介绍

　　Intl对象是ECMAScript国际化API的命名空间，它提供对语言敏感的字符串比较、支持数字格式化以及日期和时间的格式化。

1、Intl.Collator对象

　　collator这个单词意思是排序器。Intl.Collator对象是排序器的构造函数，可以支持对语言敏感的字符串比较。语法如下：new Intl.Collator([locales[, options]])

　　options有个可选参数是numeric，布尔属性，是否按照数值进行比较，默认是false，还记不记得下面经典的数字字符串排序问题：

['15', '2', '100'].sort();    
// 结果是：["100", "15", "2"]

　　因为数字字符串按照字符串顺序进行排列了。下面我们使用Intl.Collator对象的数值排序参数进行改造下，则最后字符串按照字符串字面上的数值大小进行排序了：

['15', '2', '100'].sort(new Intl.Collator(undefined, { numeric: true }).compare);
// 结果是：["2", "15", "100"]

　　然后我们说说中文的排序，如果我们希望我们的中文按照首字母拼音排序，该怎么处理？

var arrUsername = ["陈坤", "邓超", "杜淳", "冯绍峰", "韩庚", "胡歌", "黄晓明", "贾乃亮", "李晨", "李易峰", "鹿晗", "井柏然", "刘烨", "陆毅", "孙红雷"];
// 对上面arrUsername进行默认的sort()排序，结果是下面这样：
arrUsername.sort();
// 结果是：["井柏然", "冯绍峰", "刘烨", "孙红雷", "李易峰", "李晨", "杜淳", "胡歌", "贾乃亮", "邓超", "陆毅", "陈坤", "韩庚", "鹿晗", "黄晓明"]

　　顺序就不对了。此时，可以使用中文简体的BCF 47语言标记字符串zh进行排序，代码如下：

arrUsername.sort(new Intl.Collator('zh').compare);
// 结果是：["陈坤", "邓超", "杜淳", "冯绍峰", "韩庚", "胡歌", "黄晓明", "贾乃亮", "井柏然", "李晨", "李易峰", "刘烨", "陆毅", "鹿晗", "孙红雷"]

2、Intl.DateTimeFormat对象

new Intl.DateTimeFormat('zh', {
    year: 'numeric',  
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
}).format(new Date())

3、Intl.ListFormat对象

　　Intl.ListFormat可以让对语言敏感的列表进行格式化

　　详见文章：《Intl.ListFormat对象根据语言环境进行列表格式化》http://www.deathghost.cn/article/javascript/91

4、Intl.NumberFormat对象

　　Intl.NumberFormat可以根据不同语言环境最数值字符串进行不同的呈现处理。本对象可以看成是Number.toLocaleString()方法的升级版，参数和含义都是一样的

　　详见文章：《Intl.NumberFormat数字格式化应用》- https://zhuanlan.zhihu.com/p/356991916

// 数字变成中文数字显示
// 例如，我们要显示星期几，不需要再弄个数组进行一一映射了，试试下面的方法：
'星期' + new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(new Date().getDay());
// 结果是："星期三"

5、Intl.RelativeTimeFormat对象

　　该Intl.RelativeTimeFormat对象是一个构造函数，可以实现本地区域化相对时间格式。犹如Web端我们常见的“昨天”，“20秒前”或“1个月”之类的短语，而不是完整日期和时间戳。

　　详见文章：《Intl.RelativeTimeFormat相对时间格式化》- http://www.deathghost.cn/article/javascript/53

var rtf = new Intl.RelativeTimeFormat('zh');
rtf.format(-1, 'day');  // -1表示前一天，结果是："1天前"
rtf.format(1, 'day');   // 1表示往后一天， 结果是："1天后"

// 如果我们设置其他的参数，如下，则返回结果更有意思：
var rtf = new Intl.RelativeTimeFormat('zh', {
    numeric: 'auto'
});
rtf.format(-1, 'day');  // 结果是："昨天"
rtf.format(1, 'day');   // 结果是："明天"