成为作者

关于国际化语言 Intl

用户头像
西贝
关注
发布于: 2020 年 10 月 09 日
关于国际化语言 Intl

什么是 Intl



Intl 是一个对象，是 ECMAScript 定义的一个命名空间，内置多个属性和方法。它提供了精确的字符串对比、数字格式化、日期时间格式化等常见的功能。





属性



  • Intl.Collator

* 指定国际化语言的字符串比较



  • Intl.DateTimeFormat

* 指定国际化语言的日期和时间的比较



  • Intl.ListFormat

* 指定国际化语言的列表数据格式化



  • Intl.NumberFormat

* 指定国际化语言的数字格式化函数



  • Intl.PluralRules

* 启用多种敏感格式和多种语言



  • Intl.RelativeTimeFormat

* 指定国际化语言的相对时间格式化函数



方法



  • Intl.getCanonicalLocales()

  • 返回包含规范区域语言的数组，同时会校验格式有效的区域语言代码





Intl.Collator



new Intl.Collator([locales[, optionis]])
Intl.Collator.call(this[, locales[, options]])



locales



指定使用的国际化语言，例如zh、en、de、fr 等等，同时可以使用扩展键，如co、kn、kf



例如



const zhArray = ['你', '我', '他']
console.log(zhArray.sort()) // ['他', '你', '我']
console.log(zhArray.sort(new Intl.Collator('zh').compare)) // ['你', '他', '我']



常见的汉字排序，使用默认的 sort 排序，采用的是 Unicode 编码顺序，不符合汉语的排序规则，使用 new Intl.Collator('zh') 指定语言，再调用 compare 方法（因为 sort 的参数是一个函数），返回的结果符合排序的预期



const numArray = [1, 13, 2, 10]
console.log(numArray.sort()) // [1, 10, 13, 2]
console.log(numArray.sort(new Intl.Collator('en-u-kn-true').compare)) // [1, 2, 10, 13]



常见的数字排序，使用默认的 sort 排序，是按照字符串形式的 Unicode 编码顺序，不符合数字的排序规则，使用 new Intl。Collator('en-u-kn-true') 指定扩展键 kn 为 true , 启用数字形式，再调用 compare 完成排序，达到预期



补充一下关于扩展键的使用



扩展键使用方式 xx-u-yy-value , xx 为国家化语言，如 zh、cn 等, u 为固定，yy 为使用的扩展键，如 co、kn、kf 等，value 为扩展键的可选值，如 en-u-kn-true 中的 true 即为 kn 的可选值，表示启用 kn



co 针对的是某些地区的语言格式，可选值包括 gb2312、pinyin等等



kn 表示是否启用数字比较，可选值包括 true 和 false，true 则启用；false 则不启用



kf 大写或小写优先，可选值包括 upper、lower 和 false，upper 则大写优先；lower 则小写优先；false 则不使用



const enArray = ['a', 'B', 'A', 'b']
console.log(enArray.sort()) // ['A', 'B', 'a', 'b']
console.log(enArray.sort(new Intl.Collator('en-u-kf-upper').compare)) // ['A', 'a', 'B', 'b']
console.log(enArray.sort(new Intl.Collator('en-u-kf-lower').compare)) // ['a', 'A', 'b', 'B']



options



options 是一个对象，属性包括 localeMatcher 、usage、sensitivity 、ignorePunctuation 、numeric 和 caseFirst



localeMatcher 可选值为 lookup 和 beat fit ，默认是 beat fit。该配置项表示匹配器运行时提供的运行环境，beat fit 表示尽可能的适合当前环境；lookup 表示通过算法查找适合的环境。一般默认即可，不需要配置。（该配置项没有找到较为准确的说明，以上为个人理解，如有准确的说明资料，欢迎提供）



值得一提的是 numeric 和 caseFirst。numeric 和 locales 中的扩展键 kn 相同，如果两者都存在，则以 numeric 为准，类似的 caseFirst 和 locales 中的 kf 相同，如果两者都存在，则以 caseFirst 为准



其它 options 属性针对的是特殊的国际化语言，不再展开，可参考 MDN





Intl.DateTimeFormat



指定国际化语言对日期和时间进行格式化



new Intl.DateTimeFormat([locales[, options]])
Intl.DateTimeFormat.call(this[, locales[, options]])



locales



指定的国际化语言，可使用扩展键 nu 、ca 等



const date = Date.now()
console.log(new Intl.DateTimeFormat('zh').format(date)) // 2020/10/9
console.log(new Intl.DateTimeFormat('zh-u-ca-chinese-nu-hanidec').format(date)) // 二〇二〇年八月二三 // 阴历



ca 指定的是历法，如 chinese (中国)，indian (印度历)、buddhist (佛历)等等，nu 则是展示形式



options



options 是一个对象，包含一些配置项，如下



localeMatcher 、 timeZone 、 hour12 、 formatMatcher 、 weekday 、 era 、 year 、 month 、 day 、 hour 、 minute 、 second 、 timeZoneName



timeZone 指定使用的时区，比如常用的 UTC 、 Asia/Shanghai 、 America/New_York 等



hour12 是否采用12小时制，可选值为true 和 false



weekday 工作日的展示方式，可选值为 narrow 、 short 和 long



const date = Date.now()
console.log(new Intl.DateTimeFormat('zh-u-ca-chinese-nu-hanidec', {weekday: 'narrow'}).format(date)) // 五
console.log(new Intl.DateTimeFormat('zh-u-ca-chinese-nu-hanidec', {weekday: 'short'}).format(date)) // 周五
console.log(new Intl.DateTimeFormat('zh-u-ca-chinese-nu-hanidec', {weekday: 'long'}).format(date)) // 星期五



year 、 day 、 hour 、 minute 和 second 可选值为 numeric 和 2-digit



month 可选值为 numeric 、 2-digit 、 narrow 、 short 和 long



const date = Date.now()
console.log(new Intl.DateTimeFormat('zh-u-ca-chinese-nu-hanidec', {year: '2-digit'}).format(date)) // 二〇二〇庚子年
console.log(new Intl.DateTimeFormat('zh-u-ca-chinese-nu-hanidec', {year: 'numeric'}).format(date)) // 二〇二〇庚子年
console.log(new Intl.DateTimeFormat('zh', {month: 'numeric'}).format(date)) // 10月
console.log(new Intl.DateTimeFormat('zh', {month: '2-digit'}).format(date)) // 10月
console.log(new Intl.DateTimeFormat('zh', {month: 'narrow'}).format(date)) // 10
console.log(new Intl.DateTimeFormat('zh', {month: 'short'}).format(date)) // 10月
console.log(new Intl.DateTimeFormat('zh', {month: 'long'}).format(date)) // 十月
console.log(new Intl.DateTimeFormat('zh', {day: 'numeric'}).format(date)) // 9日
console.log(new Intl.DateTimeFormat('zh', {day: '2-digit'}).format(date)) // 09日



numeric 和 2-digit 的区别在于，当数值小于10，不满两位数时，numeric 正常展示，2-digit 用0补足十位





Intl.NumberFormat



使用国际化语言对数字进行格式化



new Intl.NumberFormat([locales[, options]])
Intl.NumberFormat.call(this[, locales[, options]])



locales



指定的国际化语言，可用的扩展键为 nu



nu 表示要使用的编号格式，如 hanidec (中文十进制数字)



const num = 1234
console.log(new Intl.NumberFormat('en-u-nu-hanidec').format(num)) // 一,二三四
console.log(new Intl.NumberFormat('en-u-nu-latn').format(num)) // 1,234
const number = 123456.789;
// 德语使用逗号作为小数点,使用.作为千位分隔符
console.log(new Intl.NumberFormat('de-DE').format(number)) // 123.456,789



options



配置项



说明

decimal 纯数字格式

currency 货币格式

percent 百分比格式

unit 单位格式 (实验阶段)



常用的配置项有 style 、 currency 、 useGrouping，其它配置项可查看 MDN



style 指定要使用的格式样式，默认为 decimal



currency 指定货币符号，可选值有 USD (美元) 、 EUR (欧元) 、 CNY (人民币) 等等



useGrouping 是否使用分组分隔符，true 或 false



const number = 123456.789;
console.log(new Intl.NumberFormat('zh', { style: 'currency', currency: 'EUR' }).format(number)) // €123,456.79
console.log(new Intl.NumberFormat('zh', { style: 'currency', currency: 'CNY' }).format(number)) // ￥123,456.79
console.log(new Intl.NumberFormat('en', { style: 'currency', currency: 'USD', useGrouping: false }).format(number)) // $123456.79





Intl.RelativeTimeFormat



指定国际化语言的相对时间格式



new Intl.RelativeTimeFormat([locales[, options]])



locales



指定的国际化语言



options



配置项包括 localMatcher 、 numeric 、 style



numeric 指定输出消息的格式，可选值包括 always 和 auto



style 指定国际化消息的长度，可选值包括 long 、 short 、 narrow



const rtf = new Intl.RelativeTimeFormat('en', {
	numeric: 'always',
	style: 'long'
})
console.log(rtf.format(-1, 'day')) // 1 day ago
const rtf2 = new Intl.RelativeTimeFormat('en', {
	numeric: 'auto',
	style: 'long'
})
console.log(rtf2.format(-1, 'day')) // yesterday
const rtf3 = new Intl.RelativeTimeFormat('zh', {
	numeric: 'always',
	style: 'short'
})
console.log(rtf3.format(-1, 'day')) // 1天前
const rtf4 = new Intl.RelativeTimeFormat('zh', {
	numeric: 'auto',
	style: 'short'
})
console.log(rtf4.format(-1, 'day')) // 昨天





Intl.ListFormat 和 Intl.PluralRules，以及方法 Intl.getCanonicalLocales() 没有理解其应用，以后再补充



划线
评论
复制
发布于: 2020 年 10 月 09 日 阅读数: 13

版权声明: 本文为 InfoQ 作者【西贝】的原创文章。

原文链接:【http://xie.infoq.cn/article/15b78bc10e3fcfcbb5b3a9b0b】。文章转载请联系作者。

JavaScript前端国际化格式化
用户头像

西贝

关注

还未添加个人签名 2019.02.15 加入

还未添加个人简介

评论

发布
暂无评论
Copyright © 2020, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 |  京 ICP 备 16027448 号 - 5 京公网安备 京公网安备 11010502039052号
关于国际化语言 Intl