浅析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');   // 结果是:"明天"

  先简单了解下即可,需要使用的时候再具体查看文档吧

posted @ 2017-07-11 11:26  古兰精  阅读(1758)  评论(0编辑  收藏  举报