Freewind @ Thoughtworks scala java javascript dart 工具 编程实践 月结 math python english [comments admin] [feed]

(2013-01-01) 07. 国际化与本地化

广告: 云梯:翻墙vpn (省10元) 土行孙:科研用户翻墙http proxy (有优惠)

在AnguarJs中的国际化与本地化

什么是i18n和l10n

国际化(Internationalization),缩写为i18n,是指在开发可适应多种不同的语言和文化的产品的过程。本地化(Localization),缩写为l10n,是指将程序和文字变为某种特定语言和文化的过程。对于程序员来说,国际化表示在程序中把所有与地区相关的文字和格式都抽象到程序之外。而本地化是指为刚才的抽象提供不同地区的翻译内容和相关的格式。

Anguar目前对国际化和本地化的支持如何

当前,Anguar通过date,numbercurrency这几个filter来支持i18n/l10n.

另外,Anguar还通过ngPluralize这个directive来支持区域多元化。

在Angular中,所有支持区域多元化的组件,都依赖于$locale这个service管理的与区域相关的规则。

如果你想直接看例子,我们准备了一些页面用来演示Angular中filter的各种不同的区域规则。你可以在Github,或Angular开发包下的i18n/e2e目录中找到它们。

什么是区域代码

区域是依据地理、政治或文化的而形成的地区。最常用的区域代码由两部分组成:语言代码和国家代码。例如,en-US,en-AU,zh_CN都是此例。其中国家代码是可选的,所以en,zh,sk也是合法的区域代码。参见ICU网站了解更详细的信息。

Angular支持的locales

Angular将数字与日期根据不同的区域拆分为不同的文件,一个区域一个。你可以在这里找到Angular当前支持的区域列表。

Angular中的区域规则

Angular中提供了两种方式:

1. 预绑定的规则集

你可以把想支持的区域相关的文件添加到angular.jsangular.min.js文件的最后,以绑定它们。

比如在*nix系统中,可以使用以下命令,把德国的相关文件添加到angular.js后面:

cat angular.js i18n/angular-locale_de-ge.js > angular_de-ge.js

如果在程序中直接引用`angular_de-ge.js`而不是原始的angular.js文件,则Angular会自动为德国区域配置好本地化规则。

**在index.html页面中包含locale js文件**

你也可以在index.html页面中包含与locale相关的js文件。比如,当客户端需要德国的区域时,你提供一个像这样的`index_de-ge.html`:

<html ng-app>
 <head>
….
   <script src="angular.js"></script>
   <script src="i18n/angular-locale_de-ge.js"></script>
….
 </head>
</html>

两种做法的比较

两种做法都需要你为不同的区域准备不同的index.html或js文件。你还需要配置你的服务器为不同的区域返回正确的文件。

但是第二种做法(在index.html页面中包含locale js文件)会比第一种慢,因为它需要另外导入一些文件。

“陷阱”

货币符号的陷阱

Angular的currencyfilter允许你从locale service中使用默认的货币符号,或者你为该filter提供一些自定义的货币符号。如果你的程序仅仅用于一个区域,则可以只使用默认的货币符号。否则的话,你应该提供你自定义的货币符号来保证实际显示的值是正确的。

比如,你想显示1000美元:{{ 1000 | currency }}。如果程序在en-US区域被访问,则会显示$1000.00。但如果在一个不同的区域(比如日本)来访问的话(它的locale为ja),则会显示为¥1000.00,这显然是不正确的。

这种情况下,你需要使用currency filter来覆盖默认的货币符号。你可以传入一个参数,比如:{{ 1000 | currency:"USD$"}}。这样不论在哪个区域访问,都会显示一样的值$1000.00

翻译长度的陷阱

注意"字符串/时间日期"的格式,在不同的区域长度可能相差很大。比如,June 3, 1977,翻译成西班牙语,会变成3 de junio de 1977。可能还有更夸张的情况。所以,为你的程序提供国际化的时候,要让你的CSS样式尽量满足多种情况,多测试,不要让UI组件的布局被打乱。

时区

注意Anguar的datetime filter使用浏览器的time zone的设置。所以同样的程序,在不同的时区的电脑上,可能显示的时间不同。不论是JavaScript或Angular,目前都不支持由开发者指定一个时区。

comments powered by Disqus