浅析JS里的Intl对象及常用方法使用介绍
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'); // 结果是:"明天"
先简单了解下即可,需要使用的时候再具体查看文档吧