资讯专栏INFORMATION COLUMN

JS魔法堂:不完全国际化&本地化手册 之 理論篇

yacheng / 3064人阅读

摘要:前言最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求国际化本地化。本篇将阐述国际化和本地化的概念,以及其中一个很重要的概念也叫或。语法注意一般采用首字母大写,后续字母全小写指定与国家地域对应的语言方言文化。

前言

 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求——国际化&本地化。熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已。趁着这个机会好好学习整理一下,为后面的技术选型做准备。
 本篇将阐述国际化和本地化的概念,以及其中一个很重要的概念——Language tag(也叫Language code 或 Culture)。

何为国际化?

 国际化我认为就是应用支持多语言和文化习俗(数字、货币、日期和字符比较算法等),而本地化则是应用能识别用户所属文化习俗自动适配至相应的语言文化版本。
 过去常常以为国际化就是字符串的替换——如"你好!"替换为"What"s up, man!",其实具体是分为以下5方面:

字符串替换
 如"你好!"替换为"What"s up, man!".

数字表示方式
 如1200.01,英语表示方式为1,200.01,而法语则为1 200,01,德语则为1.200,01.

货币表示方式
 如人民币¥1,200.01,美元表示方式为$1,200.01,而英语的欧元则为€1,200.01,德语的欧元则为1.200,01 €.

注意: 这里没有还没算上汇率呢.

日期表示方式
 如2016年9月15日,英语表示方式为9/15/2016, 而法语为15/9/2016, 德语为15.9.2016.

字符比较算法
 如äz比较时,英语、德语中均是ä排在z前面,而在瑞典语中则是z排在ä前面.

本地化的关键 —— Language Tag

 既然要自动适配至用户所属的语言文化版本,那么总得有个根据才能识别吧?我想大家应该对zh-CNen等不陌生吧,而它们正是我们所需的根据了!在我们使用已有i18n库实现国际化/本地化时,必定会写下以下文档

{
  "en": { "name": "Enter Name" },
  "zh-CN": { "name": "输入姓名" }
}

 但除了enzh-CN还有其他键吗?它们的组成规则又是如何的呢?下面我们来稍微深入的了解这些Language Tag吧!

语法规则

注意以下采用ABNF语言描述(ABNF的语法请参考语法规范:BNF与ABNF)

Language-Tag = langtag
             / privateuse
             / grandfathered

langtag = language
          ["-" script]
          ["-" region]
          *("-" variant)
          *("-" extension)
          ["-" privateuse]

可以看到Language-Tag分为langtagprivateusegrandfatherd三个子类,下面我们先了解一般情况用不上的两个吧!
privateuse
 标签的意思不由subtag registry定义,而是由使用的团队间私自定义、维护和使用。
 格式:

privateuse = "x" 1*("-" (1*8alphanum))

示例:x-zh-CN是privateuse,其意思不一定与languagezh-CN一致。
注意: 只作为小集团内部用可以,决不能大范围适用。

grandfathered
 用于向后兼容。由于RFC 4646前的标签无法完全匹配当前registry的标签语法和意思,因此通过grandfathered来提供向后兼容的特性。
 语法:

grandfathered = irregular
              / regualr
irregular = "en-GB-oed"         ; irregular tags do not match
          / "i-ami"             ; the "langtag" production and
          / "i-bnn"             ; would not otherwise be
          / "i-default"         ; considered "well-formed"
          / "i-enochian"        ; These tags are all valid,
          / "i-hak"             ; but most are deprecated
          / "i-klingon"         ; in favor of more modern
          / "i-lux"             ; subtags or subtag
          / "i-mingo"  
          / "i-navajo"
          / "i-pwn"
          / "i-tao"
          / "i-tay"
          / "i-tsu"
          / "sgn-BE-FR"
          / "sgn-BE-NL"
          / "sgn-CH-DE"
regular = "art-lojban"        ; these tags match the "langtag"
        / "cel-gaulish"       ; production, but their subtags
        / "no-bok"            ; are not extended language
        / "no-nyn"            ; or variant subtags: their meaning
        / "zh-guoyu"          ; is defined by their registration
        / "zh-hakka"          ; and all of these are deprecated
        / "zh-min"            ; in favor of a more modern
        / "zh-min-nan"        ; subtag or sequence of subtags
        / "zh-xiang"

注意: 几乎所有grandfarthered标签均可被当前registry的标签及其组合作替代(像i-tao可以被tao代替),因此如无意外请使用现行的标签吧。

下面就到了我们的重头戏langtag了,首先我们看看langtag下的第一个subtag——language.

Primary language subtag

 像en这种就是Primary language subtag,用于标识资源所对应的语言。
 语法:

language = 2*3ALPAH
           ["-" extlang]
         / 4ALPHA
         / 5*8ALPHA
extlang = 3ALPHA
          *2("-" 3ALPHA)

看到language有三种形式,其中让我比较好奇的是第一种2*3ALPHA ["-" extlang]。这种形式中前面的2*3ALPHA称为macrolanguage,用于标明资源对应一种语言的汇总,而具体的某一种语言/方言则通过extlang指定。而包含extlang部分的language也被称为encompassed language.
zh-cmnzh-yue就是encompassed language,其中zh是macrolanguage,而cmnyue则是extlang。
 这里有个很有趣的事情是,我们认为普通话和广东话等都是汉语的方言,但西方却认为普通话、广东话根本就不属于一种语言,因此像zh-cmnzh-yue在规范中被设置为redundant,建议直接使用cmnyue等。不过由于历史原因,我们还是使用zh-CN代表cmn-CN
 另外现在可以作为macrolanguage的就只有7个标签(ar,kok,ms,sw,uz,zhsgn)
 另外几个和cmn类似的subtags如下

cmn 普通话(官话、国语)
wuu 吴语(江浙话、上海话)
czh 徽语(徽州话、严州话、吴语-徽严片)
hak 客家语
yue 粤语(广东话)
nan 闽南语(福建话、台语)
cpx 莆仙话(莆田话、兴化语)
cdo 闽东语
mnp 闽北语
zco 闽中语
gan 赣语(江西话)
hsn 湘语(湖南话)
cjy 晋语(山西话、陕北话)

注意: 一般采用全小写

Script subtag

 用于指定字迹或文字系统资源所属的语言和方言等。
 语法:

script = 4ALPHA

注意: 一般采用首字母大写,后续字母全小写

Region subtag

 指定与国家、地域对应的语言/方言文化。
 语法:

region = 2ALPHA
       / 3DIGIT

注意: 一般采用全大写

Variant subtag

 指定其他subtag又无法提供的额外信息
 语法:

variant = 5*8alphanum
        / (DIGIT 3alphanum)

示例:de-CH-1996其中1996是variant subtag,整体意思是在Switzerland使用的自1996改良过的德语。

Extension subtag

 提供一种机制让我们去扩展langtag
 语法:

extension = singleton 1*("-" (2*8alphanum))
singleton = DIGIT
          / %x41-57
          / %x59-5A
          / %x61-77
          / %x79-7A

现在仅支持u作为sigleton的值。
示例:de-DE-u-co-phonebk表示采用电话本核对的方式对内容进行排序等操作。

更多关于language-tag的信息请参考BCP 47

如何选择Language Tag

 硬着头皮啃下这么多规范的内容,但我还不知道如何组合合适的language-tag呢:(其实选择和组合的原则就只有一条
在足以区别当前上下文中其他language-tag的前提下,保持language-tag足够地短小精干
示例1:下文普通话、粤语并存

小陈说:"老大爷,东方广场怎么走啊?" 老大爷回答道:"你讲咩也啊?我听唔明喔。"

示例2:下文含大陆人讲英语、香港人讲普通话和美国人说英语

小陈说:"Hi, where are you come from?" 李先生说:"你的英文跟我的普通话一样普通啊,哈哈!" Simon说:"Hey, what"s up!"

 那现在引出另一个问题,那就是我们怎么知道各个subtag具体定义了哪些值呢?
具体都定义在IANA Language Subtag Registry中了。
假如觉得查找起来还是不方便,那么就使用Language Subtag Lookup tool吧!
另外若不清楚各国各地区所使用的语言或方言时,可通过Ethnologue查看,直接点击地图上的区域即可获取相应的subtag信息。

总结

 现在我们已经对国际化和本地化有了更全面的理解,也对Language tag有了更深入的认识,现在是不是迫不及待想挽起袖子撸代码呢?敬请期待下篇《JS魔法堂:不完全国际化&本地化手册 之 实战篇》
 尊重原创,转载请注明来自: http://www.cnblogs.com/fsjohn... ^_^肥仔John

感谢

网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"?
Language Subtag Registry
BCP 47
Language on the Web
Choosing a Language Tag
Language tags in HTML and XML

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80479.html

相关文章

  • JS魔法:完全际化&地化手册 拓展篇

    摘要:前言最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求国际化本地化。因此不是表示存在多个选择而是表示没有适合的选项。 前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求——国际化&本地化。熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在有的阶段而已。趁着这个机会好好学习整理一下,为后面的技术选型做准备。 本篇作为系列的最后一篇,...

    Karuru 评论0 收藏0
  • JS魔法:完全际化&地化手册 实战篇

    摘要:前言最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求国际化本地化。注意苹果官网采用的是的机制提供本地化功能,和本篇主打前端实现有所区别。它们分别是处理排序的处理日期格式化的和处理数字货币等格式化的。 前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求——国际化&本地化。熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在有的阶段而...

    paraller 评论0 收藏0
  • JS魔法实战:纯前端的图片预览

    摘要:一前言图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了。偶然从上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅。类型为,表示在读取文件时发生的错误,只读。 一、前言   图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了。在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径...

    岳光 评论0 收藏0
  • CSS魔法:重拾Border——图片作边框

    摘要:一铺搞定一铺清袋粤语的一铺搞定其实就是一次完成全部工作的意思,上面关于的属性,要是每次都逐个设置那要敲多少次键盘啊。。。语法粤语的一铺清袋其实就是把之前的成果一次性归零。 前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/...

    linkFly 评论0 收藏0
  • CSS魔法:重拾Border——更广阔的遐想

    摘要:也就是说我们操作的几何公式中的未知变量,而具体的画图操作则由渲染引擎处理,而不是我们苦苦哀求设计师帮忙。 前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比...

    lily_wang 评论0 收藏0

发表评论

0条评论

yacheng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<