jqueryvuereact前端多语⾔国际化翻译⽅案指南
❝
本⽂章共3470字，预计阅读时间5-10分钟。
❞
国际化-前⾔
每个开发者能希望编写的程序可以让全世界的⽤户使⽤，它要求从产品中抽离所有地域语⾔，国家/地区和⽂化相关的元素。换种说法，「应⽤程序」的功能和「代码设计」时考虑在不同地区运⾏的需要，其代码适应不同区域要求。开发这样的的过程，就称为国际化（
i n t e r n a t i o n a l i z a t i o n），简称i18n。
❝
i18n（其来源是英⽂单词i n t e r n a t i o n a l i z a t i o n的⾸末字符i和n，18为中间的字符数）是“国际化”的简称。在资讯领
域，国际化(i18n)指让产品（出版物，软件，硬件等）⽆需做⼤的改变就能够适应不同的语⾔和地区的需要。对程序来
说，在不修改内部代码的情况下，能根据不同语⾔及地区显⽰相应的界⾯。
❞
在全球化的时代，国际化尤为重要，因为产品的潜在⽤户可能来⾃世界的各个⾓落！
国际化-范围
国际化与本地化⼯作的焦点包括但不限于如下：
语⾔
不同国家的语⾔;
⽂字书写⽅向；(⽐如德语是从左到右，⽽波斯语、希伯来语和阿拉伯语是由右到左。)
图⽚中包含的⽂字；
程序中的⾳频；
程序中的视频字幕；
⽂化
图⽚和颜⾊：这牵涉到理解和⽂化适宜的议题；
名字和称谓；
政府给定的编码（如美国的社会安全码，英国的N a t i o n a l I n s u r a n c e n u m b e r，爱沙尼亚的I s i k u k o o d及其它各国的⾝份证号码）和护照；
电话号码前缀、地址和国际邮递区号；
货币（符号、货币标志的位置）；
长度、容积、重量单位；
标准纸张⼤⼩；
书写习惯
⽇期跟时间的格式，包含各式⽇历。
时区（在国际场合会使⽤世界标准时间）
数字格式（⼩数点、分隔点的位置、分隔所⽤的字符）
产品和服务所要⾯向的法规
程序的内容、运营⽅式及⽅向需要遵守当地法律、法规;
多语⾔翻译⽅案
⽬前，并没有⾮常完美，适⽤所有情况的多语⾔⽅案，所以到⼀个⽐较契合⾃⼰团队的⽅案，并做⼀系列配制⽅法去⽤，是⽐较耗时的⼀项⼯程。「是否需要花时间成本来做到前端国际化，完全取决分析⾃⾝团队的需求。」
使⽤插件在线翻译
随着全球化⽹络时代的到来，语⾔障碍已经成为⼆⼗⼀世纪社会发展的重要瓶颈，实现任意时间、任意地点、任意语⾔的⽆障碍⾃由沟通是⼈类追求的⼀个梦想。这仅是全球化背景下的⼀个⼩缩影。在社会快速发展的进程中，在线翻译扮演越来越重要的⾓⾊。
运⾏规则
将单词序列（⼀个或多个句⼦）作为输⼊，并⽣成单词的输出序列，这是通过递归神经⽹络（R N N）实现的。具体来说，就是让两个将与某个特殊令牌⼀起运⾏的递归神经⽹络尝试根据前⼀个序列来预测后⼀个状态序列。
它主要由编码器和解码器两部分构成，因此有时候被称为编码器-解码器⽹络。
·编码器：使⽤多个深度神经⽹络层，将输⼊单词转换为相应的隐藏向量。每个向量代表当前单词及其语境。
·解码器：与编码器类似。它将编码器⽣成的隐藏向量、⾃⾝的隐藏状态和当前单词作为输⼊，从⽽⽣成下⼀个隐藏向量，最终预测下⼀个单词。
⾕歌插件在线翻译
❝
⾕歌不再提供对G o o g l e翻译的⽹站翻译器的新访问。此更改不会影响⽹站翻译器的现有使⽤。
⾕歌⿎励希望翻译⽹页的⽤户使⽤⽀持本地翻译的浏览器。
❞
效果图⽰例：
代码⽰例
<!d o c t y p e h t m l>
<h t m l l a n g="e n">
<h e a d>
<m e t a c h a r s e t="U T F-8">
<m e t a n a m e="v i e w p o r t"
c o n t e n t="w i
d t h=d
e v i c e-w i d t h,u s e r-s c a l a b l e=n o,i n i t i a l-s c a l e=1.0,m a x i m u m-s c a l e=1.0,m i n i m u m-s c a l e=1.0">
<m e t a h t t p-e q u i v="X-U A-C o m p a t i b l e"c o n t e n t="i e=e d g e">
<t i t l e>T r a n s l a t e</t i t l e>
</h e a d>
<b o d y>
<p>你好世界！</p>
<!--⾕歌翻译-->
<!--如需隐藏/更改⼀些样式，可使⽤c s s操作-->
<d i v i d="g o o g l e_t r a n s l a t e_e l e m e n t"></d i v>
</b o d y>
<s c r i p t s r c="h t t p://t r a n s l a t e.g o o g l e.c o m/t r a n s l a t e_a/e l e m e n t.j s?c b=g o o g l e T r a n s l a t e E l e m e n t I n i t"></s c r i p t>
<s c r i p t>
f u n c t i o n
g o o g l e T r a n s l a t e E l e m e n t I n i t(){
n e w g o o g l e.t r a n s l a t e.T r a n s l a t e E l e m e n t({
//i n c l u d e d L a n g u a g e s:'d e,e n,e s,f r,i t'，需要下拉翻译⽀持哪些语⾔，默认全部
l a y o u t:g o o g l e.t r a n s l a t e.T r a n s l a t e E l e m e n t.I n l i n e L a y o u t.H O R I Z O N T A L
},'g o o g l e_t r a n s l a t e_e l e m e n t');
}
</s c r i p t>
</h t m l>
在线⽰例/源码地址
在线⽰例：
源码地址：
注：⽬前浏览器基本都内置了-⽹页在线翻译功能**
❝
P S:⾕歌翻译插件会在替换⽂本时修改标签（D O M结构）会导致V u e、R e a c t这种基于v i r t u a l d o m的框架产⽣问题
❞
问题：难以避免的误差
机器翻译其误差在所难免，原因在于，机器翻译运⽤语⾔学原理，机器⾃动识别语法，调⽤存储的词库，⾃动进⾏对应翻译，但是因语法、词法、句法发⽣变化或者不规则，出现错误是难免的，⽐如《⼤话西游》中**“给我⼀个杀你的理由，先”**中，“先”字意义上其实是起修饰限制作⽤，但在机器翻译时就会有不同的意思。
机器毕竟是机器，没有⼈对语⾔的特殊感情。它怎么会感受“「万⾥悲秋常作客，百年多病独登台」”的⽆限悲凉之意？毕竟汉语因其词法、语法、句法的变化及其语境的更换，其意思⼤相径庭。
维护多套页⾯/语⾔代码
顾名思义：**不同语⾔编写不同的页⾯。**假设需要⽀持3种语⾔，此时需要编写三种不同的页⾯，这样的弊端是当页⾯需要维护修改时，需要对不同的页⾯进⾏更改
效果图⽰例：
在线⽰例/源码地址
在线⽰例：
源码地址：
语⾔包配置⽂件
将所有的「语⾔资源放在独⽴的⽂件夹下」，以每个字段「唯⼀标识」，去到不同语⾔相对应的字段，以显⽰来完成前端国际化。这样在h t m l我们只需要输出标识符，在j s中配置好功能、路径，我们就可以让它⾃⾏去语⾔资源包中到对应语⾔字段以显⽰。
jQu e ry - 多语⾔翻译
使⽤插件：j Q u e r y.i18n.p r o p e r t i e s
插件G i t地址：
代码⽰例
「主要步骤如下：」
j q u e r y.j s⽂件
j q u e r y.i18n.p r o p e r t i e s.j s⽂件
各个国家语⾔包（.p r o p e r t i e s格式⽂件，每个国家语⾔包⽬录下都会有该⽂件，只是配置不同）
//c o m m i o n.p r o p e r t i e s⽂件格式如下
//(k e y)=(v a l u e)
h i=H e l l o w o r l d!
i n d e x编写逻辑，读写c o o k i e、引⼊语⾔包、根据c l a s s渲染⽂案
整理完成后⽬录如下图：
「h t m l⽂件如下：」
<!d o c t y p e h t m l>
<h t m l l a n g="e n">
<h e a d>
<m e t a c h a r s e t="U T F-8">
<m e t a n a m e="v i e w p o r t"
c o n t e n t="w i
d t h=d
e v i c e-w i d t h,u s e r-s c a l a b l e=n o,i n i t i a l-s c a l e=1.0,m a x i m u m-s c a l e=1.0,m i n i m u m-s c a l e=1.0">
<m e t a h t t p-e q u i v="X-U A-C o m p a t i b l e"c o n t e n t="i e=e d g e">
<!--这⾥是设置i d为i18n_p a g e n a m e，引⼊了资源⽂件c o m m o n-->
<m e t a i d="i18n_p a g e n a m e"c o n t e n t="c o m m o n">
<t i t l e>j Q u e r y-多语⾔翻译</t i t l e>
</h e a d>
<b o d y>
<!--这⾥⾯c l a s s=”i18n”写法，下边在j s⾥⾯我们可以根据类选择器获取需要国际化的地⽅，-->
<!--然后n a m e=”h i”这⾥⾯的h i跟我们语⾔包⾥⾯资源⽂件⾥⾯的k e y保持⼀致-->
<l a b e l c l a s s="i18n"n a m e="h i"></l a b e l>
<b r>
<!--切换按钮-->
<s e l e c t i d="l a n g u a g e">
<o p t i o n v a l u e="z h-C N">中⽂</o p t i o n>
<o p t i o n v a l u e="e n">英语</o p t i o n>
<o p t i o n v a l u e="i d n">印尼语语</o p t i o n>
</s e l e c t>
</b o d y>
<s c r i p t s r c="./i18n/j q u e r y.j s"></s c r i p t>
<s c r i p t s r c="./i18n/j q u e r y.i18n.p r o p e r t i e s.j s.j s"></s c r i p t>
<s c r i p t>
/**
*c o o k i e操作
*/
v a r g e t C o o k i e=f u n c t i o n(n a m e,v a l u e,o p t i o n s){
i f(t y p e o f v a l u e!='u n d e f i n e d'){//n a m e a n d v a l u e g i v e n,s e t c o o k i e
o p t i o n s=o p t i o n s||{};
i f(v a l u e===n u l l){
v a l u e='';jquery在线库
o p t i o n s.e x p i r e s=-1;
}
v a r e x p i r e s='';
i f(o p t i o n s.e x p i r e s&&(t y p e o f o p t i o n s.e x p i r e s=='n u m b e r'||o p t i o n s.e x p i r e s.t o U T C S t r i n g)){
v a r d a t e;
i f(t y p e o f o p t i o n s.e x p i r e s=='n u m b e r'){
d a t e=n
e w D a t e();
d a t e.s
e t T i m e(d a t e.g e t T i m e()+(o p t i o n s.e x p i r e s*24*60*60*1000));
}e l s e{
d a t e=o p t i o n s.
e x p i r e s;
}
e x p i r e s=';e x p i r e s='+d a t e.t o U T C S t r i n g();//u s e e x p i r e s a t t r i b u t e,m a x-a g e i s n o t s u p p o r t e d b y I E
}
v a r p a t h=o p t i o n s.p a t h?';p a t h='+o p t i o n s.p a t h:'';
v a r d o m a i n=o p t i o n s.d o m a i n?';d o m a i n='+o p t i o n s.d o m a i n:'';
v a r s=[c o o k i e,e x p i r e s,p a t h,d o m a i n,s e c u r e].j o i n('');
v a r s e c u r e=o p t i o n s.s e c u r e?';s e c u r e':'';
v a r c=[n a m e,'=',e n c o d e U R I C o m p o n e n t(v a l u e)].j o i n('');
v a r c o o k i e=[c,e x p i r e s,p a t h,d o m a i n,s e c u r e].j o i n('')
d o c u m
e n t.c o o k i e=c o o k i e;
}e l s e{//o n l y n a m e g i v e n,g e t c o o k i e
v a r c o o k i e V a l u e=n u l l;
i f(d o c u m e n t.c o o k i e&&d o c u m e n t.c o o k i e!=''){
v a r c o o k i e s=d o c u m e n t.c o o k i e.s p l i t(';');
f o r(v a r i=0;i<c o o k i e s.l e n
g t h;i++){
v a r c o o k i e=j Q u e r y.t r i m(c o o k i e s[i]);
//D o e s t h i s c o o k i e s t r i n g b e g i n w i t h t h e n a m e w e w a n t?
i f(c o o k i e.s u b s t r i n g(0,n a m e.l e n g t h+1)==(n a m e+'=')){
c o o k i e V a l u e=
d
e c o d e U R I C o m p o n e n t(c o o k i e.s u b s t r i n g(n a m e.l e n g t h+1));
b r e a k;
}
}
}
r e t u r n c o o k i e V a l u e;
}
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。