专栏名称: 前端早读课
我们关注前端,产品体验设计,更关注前端同行的成长。 每天清晨五点早读,四万+同行相伴成长。
51好读  ›  专栏  ›  前端早读课

【第1032期】前端国际化

前端早读课  · 公众号  · 前端  · 2017-08-20 05:11

正文

前言

第一次了解到这个概念,之前在QQ群也有人聊前端国际化如何做的问题,不知道这篇对他有帮到吗?今日早读文章来自阿里@sundway分享。

正文从这开始~

何为国际化

国际化(Internationalization)通常在很多地方会用 i18n 代替,意思就是 I 加18个字母加 n。跟国际化还有一个类似的概念叫做本地化(Localization)通常用 L10n 表示。这是两个比较接近的概念,它之间有什么区别呢?W3C 的 Localization vs. Internationalization 这篇文档详细了介绍了这一点,对国际化理解还不是特别清晰的强烈建议读一下这篇文章。简单的理解就是,国际化就是为本地化做很多的前期工作,可以根据所做的事情是否属于只是为某一地区来区分国际化和本地化。国际化包含的东西很多,对于前端,最常接触到的就是将可本地化的元素与源代码或内容分开,以便可以根据需要根据用户的国际偏好来加载或选择本地化的替代。但国际化的工作远不止这些,例如国际化CDN 部署,Unicode 编码都可以算作国际化的范畴。

国际化 API

其实在 2012 年就已经拟定了国际化 API,详尽的内容可以参考 《ECMAScript Internationalization API Specification》。下面重点介绍几个 API 的使用:

Intl.Collator

Intl.Collator 是用于语言敏感字符串比较的 collators构造函数。语法:

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

上述语法中,locales 是可选参数,locales 的参数必须遵从 BCP 47 规范,locales 标记必须是 "en-US" 和 "zh-Hans-CN 等,这个标记包含了语言、地区和国家。完整的列表可以查看 IANA language subtag registry。options 也是可选参数,它包含了特定比较选项的对象。

示例:

var co1 = new Intl.Collator(["de-DE-u-co-phonebk"]);  
var co2 = new Intl.Collator(["de-DE"]);  
var co3 = new Intl.Collator(["en-US"]);  

var arr = ["ä", "ad", "af", "a"];  

if (console && console.log) {  
   console.log(arr.sort(co1.compare));  // Returns a,ad,ä,af  
   console.log(arr.sort(co2.compare));  // Returns a,ä,ad,af  
   console.log(arr.sort(co3.compare));  // Returns a,ä,ad,af  
}  

Intl.DateTimeFormat

Intl.DateTimeFormat是根据语言来格式化日期和时间的类的构造器类。

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

Intl.DateTimeFormat是根据语言来格式化日期和时间的类的构造器类。可以使用 options 参数来自定义 日期时间格式化方法返回的字符串。

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// 下面是假定的所在时区
// 洛杉矶(America/Los_Angeles for the US)

// 美式英语(US English) 使用  month-day-year 格式
console.log(new Intl.DateTimeFormat('en-US').format(date));
// → "12/19/2012"

// 英式英语(British English) 使用 day-month-year 格式
console.log(new Intl.DateTimeFormat('en-GB').format(date));
// → "20/12/2012"

// 韩国使用 year-month-day 格式
console.log(new Intl.DateTimeFormat('ko-KR').format(date));
// → "2012. 12. 20."

//大部分阿拉伯国家使用阿拉伯字母(real Arabic digits)
console.log(new Intl.DateTimeFormat('ar-EG').format(date));
// → "٢٠‏/١٢‏/٢٠١٢"

//在日本,应用可能想要使用日本日历,
//2012 是平成24年(平成是是日本天皇明仁的年号,由1989年1月8日起开始计算直至现在)
console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
// → "平成24/12/20"

//当请求一个语言可能不支持,如巴厘(ban),若有备用的语言印尼语(id),
//那么将使用印尼语(id)
console.log(new Intl.DateTimeFormat(['ban', 'id']).format(







请到「今天看啥」查看全文