前端实现国际化

悠悠 2021-10-08 06:58 409阅读 0赞

步骤1.引入相关的js文件

*  1、strings\_zh.properties    (表示中文属性文件)新创
 *  2、strings.properties      （表示默认情况下属性文件）新创
 *  3、jquery.i18n.properties-min-1.0.9.js（国际化需要文件）
 *  4、jquery.js

2. ![Center][]

![Center 1][]

3.属性文件配置

.![Center 2][]![Center 3][]

4.html 或jsp 页面配置

![Center 4][]![Center 5][]

5.页面加载时加载引用属性配置文件的方法

function loadLanuageProperties() {    
                  $.i18n.properties({    
                     name:'strings',    //属性文件名     命名格式： 文件名_国家代号.properties  
                     path:'${pageContext.request.contextPath}/i18n/',   //注意这里路径是你属性文件的所在文件夹  
                     mode:'map',    
                     cache:true,
                     language:zh,//zh en zh表示中文 en表示英文
                     callback:function(){    
                        $("[data-locale]").each(function(){    
                             $(this).html($.i18n.prop($(this).data("locale")));    
                         });    
                     }    
                 });    
             }

6.效果如图

英文版本

![Center 6][]

中文版本

![Center 7][]

7. 相关资源

jquery.i18n.properties-min-1.0.9.js   文件 可以直接复制

(function(k){function n(c,a){k.ajax({url:c,async:!1,cache:a.cache,contentType:"text/plain;charset="+a.encoding,dataType:"text",success:function(b){r(b,a.mode)}})}function r(c,a){for(var b="",e=c.split(/\n/),d=/(\{\d+\})/g,q=/\{(\d+)\}/g,m=/(\\u.{4})/ig,f=0;f<e.length;f++)if(e[f]=e[f].replace(/^\s\s*/,"").replace(/\s\s*$/,""),e[f].length>0&&e[f].match("^#")!="#"){var g=e[f].split("=");if(g.length>0){for(var o=unescape(g[0]).replace(/^\s\s*/,"").replace(/\s\s*$/,""),h=g.length==1?"":g[1];h.match(/\\$/)==
    "\\";)h=h.substring(0,h.length-1),h+=e[++f].replace(/\s\s*$/,"");for(var l=2;l<g.length;l++)h+="="+g[l];h=h.replace(/^\s\s*/,"").replace(/\s\s*$/,"");if(a=="map"||a=="both"){if(g=h.match(m))for(l=0;l<g.length;l++)h=h.replace(g[l],s(g[l]));k.i18n.map[o]=h}if(a=="vars"||a=="both")if(h=h.replace(/"/g,'\\"'),t(o),d.test(h)){for(var g=h.split(d),l=!0,j="",n=[],p=0;p<g.length;p++)if(d.test(g[p])&&(n.length==0||n.indexOf(g[p])==-1))l||(j+=","),j+=g[p].replace(q,"v$1"),n.push(g[p]),l=!1;b+=o+"=function("+
    j+"){";o='"'+h.replace(q,'"+v$1+"')+'"';b+="return "+o+";};"}else b+=o+'="'+h+'";'}}eval(b)}function t(c){if(/\./.test(c))for(var a="",c=c.split(/\./),b=0;b<c.length;b++)b>0&&(a+="."),a+=c[b],eval("typeof "+a+' == "undefined"')&&eval(a+"={};")}function s(c){var a=[],c=parseInt(c.substr(2),16);c>=0&&c<Math.pow(2,16)&&a.push(c);for(var c="",b=0;b<a.length;++b)c+=String.fromCharCode(a[b]);return c}k.i18n={};k.i18n.map={};k.i18n.properties=function(c){c=k.extend({name:"Messages",language:"",path:"",mode:"vars",
    cache:!1,encoding:"UTF-8",callback:null},c);if(c.language===null||c.language=="")c.language=k.i18n.browserLang();if(c.language===null)c.language="";var a=c.name&&c.name.constructor==Array?c.name:[c.name];for(i=0;i<a.length;i++)n(c.path+a[i]+".properties",c),c.language.length>=2&&n(c.path+a[i]+"_"+c.language.substring(0,2)+".properties",c),c.language.length>=5&&n(c.path+a[i]+"_"+c.language.substring(0,5)+".properties",c);c.callback&&c.callback()};k.i18n.prop=function(c){var a=k.i18n.map[c];if(a==null)return"["+
    c+"]";var b;if(typeof a=="string"){for(b=0;(b=a.indexOf("\\",b))!=-1;)a=a[b+1]=="t"?a.substring(0,b)+"\t"+a.substring(b++ +2):a[b+1]=="r"?a.substring(0,b)+"\r"+a.substring(b++ +2):a[b+1]=="n"?a.substring(0,b)+"\n"+a.substring(b++ +2):a[b+1]=="f"?a.substring(0,b)+"\u000c"+a.substring(b++ +2):a[b+1]=="\\"?a.substring(0,b)+"\\"+a.substring(b++ +2):a.substring(0,b)+a.substring(b+1);var e=[],d,j;for(b=0;b<a.length;)if(a[b]=="'")if(b==a.length-1)a=a.substring(0,b);else if(a[b+1]=="'")a=a.substring(0,b)+
    a.substring(++b);else{for(d=b+2;(d=a.indexOf("'",d))!=-1;)if(d==a.length-1||a[d+1]!="'"){a=a.substring(0,b)+a.substring(b+1,d)+a.substring(d+1);b=d-1;break}else a=a.substring(0,d)+a.substring(++d);d==-1&&(a=a.substring(0,b)+a.substring(b+1))}else if(a[b]=="{")if(d=a.indexOf("}",b+1),d==-1)b++;else if(j=parseInt(a.substring(b+1,d)),!isNaN(j)&&j>=0){var m=a.substring(0,b);m!=""&&e.push(m);e.push(j);b=0;a=a.substring(d+1)}else b=d+1;else b++;a!=""&&e.push(a);a=e;k.i18n.map[c]=e}if(a.length==0)return"";
    if(a.lengh==1&&typeof a[0]=="string")return a[0];m="";for(b=0;b<a.length;b++)m+=typeof a[b]=="string"?a[b]:a[b]+1<arguments.length?arguments[a[b]+1]:"{"+a[b]+"}";return m};k.i18n.browserLang=function(){var c=navigator.language||navigator.userLanguage,c=c.toLowerCase();c.length>3&&(c=c.substring(0,3)+c.substring(3).toUpperCase());return c};var j;if(!j)j=function(c,a,b){if(Object.prototype.toString.call(a)!=="[object RegExp]")return typeof j._nativeSplit=="undefined"?c.split(a,b):j._nativeSplit.call(c,
    a,b);var e=[],d=0,k=(a.ignoreCase?"i":"")+(a.multiline?"m":"")+(a.sticky?"y":""),a=RegExp(a.source,k+"g"),m,f,g;c+="";j._compliantExecNpcg||(m=RegExp("^"+a.source+"$(?!\\s)",k));if(b===void 0||+b<0)b=Infinity;else if(b=Math.floor(+b),!b)return[];for(;f=a.exec(c);){k=f.index+f[0].length;if(k>d&&(e.push(c.slice(d,f.index)),!j._compliantExecNpcg&&f.length>1&&f[0].replace(m,function(){for(var a=1;a<arguments.length-2;a++)arguments[a]===void 0&&(f[a]=void 0)}),f.length>1&&f.index<c.length&&Array.prototype.push.apply(e,
    f.slice(1)),g=f[0].length,d=k,e.length>=b))break;a.lastIndex===f.index&&a.lastIndex++}d===c.length?(g||!a.test(""))&&e.push(""):e.push(c.slice(d));return e.length>b?e.slice(0,b):e},j._compliantExecNpcg=/()??/.exec("")[1]===void 0,j._nativeSplit=String.prototype.split;String.prototype.split=function(c,a){return j(this,c,a)}})(jQuery);

8.注意事项

1. 如果需要对 $("\#machkanbanTip").text("秋风伴落叶") 进行国际化

只需要 $("\#machkanbanTip").text($.i18n.prop('秋风伴落叶'))  然后在中文属性文件中将 秋风伴落叶=秋风伴落叶    英文属性文件中将 秋风伴落叶=Autumn wind with deciduous leaves     注意 秋风伴落叶相当于key  所以中文属性文件和英文属性文件中 需要保持一致

[Center]: /images/20211008/654ed78b41fa49ccbc72336560d54522.png
[Center 1]: /images/20211008/2f6aa92e88b848e6abb71f7df70c18a5.png
[Center 2]: https://img-blog.csdn.net/20171208101204545?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenhmMTI0MjY1Mjg5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: /images/20211008/28ba8ceb027c4c55959ba910b06c2fd1.png
[Center 4]: https://img-blog.csdn.net/20171208101521801?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenhmMTI0MjY1Mjg5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 5]: /images/20211008/63e5794fa97f412bb89d81c67b63d703.png
[Center 6]: /images/20211008/274642680ac54ae18b30e079daf0226e.png
[Center 7]: /images/20211008/ea372c781f144e349b5838d0c47a7543.png

发表评论取消回复

表情：

评论列表（有 0 条评论，409人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现国际化

安装vue-i18n，可使用npm安装依赖包： npm install vue-i18n ![20191122133523443.png][] mian.js i

谁践踏了优雅/ 2023年06月15日 11:25/ 0 赞/ 118 阅读

相关实现国际化

Flutter实现国际化 [一. 国际化的认识][.] [二. 国际化的适配][. 1] [2.1. Widget的国际化][2.1. Widge

r囧r小猫/ 2023年01月16日 06:40/ 0 赞/ 163 阅读

相关使用react-intl，antd前端函数组件国际化实现

一、首先，添加dependencies，我使用的版本是`react-intl 2.4.0` ![在这里插入图片描述][20201117164435664.png_pic_

曾经终败给现在/ 2022年12月22日 04:43/ 0 赞/ 162 阅读

相关 SpringBoot实现国际化

一、添加国际化配置文件在resources下创建名称为i18n的文件夹，并在该文件夹中编写对应的多语言国际化文件login.properties、login\_zh\_

清疚/ 2022年11月21日 11:58/ 0 赞/ 172 阅读

相关前端时间国际化入门

> 时间只是幻觉。—— 阿尔伯特·爱因斯坦 > 最近在开发一个需要完善国际化方案的前端项目，在处理时间国际化的时候遇到了一些问题。于是花了一些时间研究，有了这篇文章。不

本是古典何须时尚/ 2022年09月16日 14:26/ 0 赞/ 349 阅读

相关 Android实现国际化

Android实现国际化国际化I18n简介 Android实现国际化 Android实现国际化国际化I18n简介

迈不过友情╰/ 2022年08月18日 05:51/ 0 赞/ 183 阅读

相关 SpringMVC实现国际化

在这里通过案例说明： 1. 在项目src向新建一个message文件夹，该文件夹下面有message\_en\_US.properties和message\_z

谁践踏了优雅/ 2022年08月06日 04:16/ 0 赞/ 211 阅读

相关 js 实现前端国际化

> 在之前的文章里, 我贴过小程序的国际化方法, 这里的方法和小程序的基本相似, > > 但是还是有细微不同, 所以单独贴出来. /

不念不忘少年蓝@/ 2022年02月02日 05:06/ 0 赞/ 323 阅读

相关前端国际化

前言 > 从10年接触编程就开始接触国际化这个概念，然而这些年全面用到国际化的项目并不是很多，且都是些螺丝钉式的工作。15年末，部门项目需要推国际化，前端这块由我来主导。

淩亂°似流年/ 2022年01月20日 08:01/ 0 赞/ 249 阅读

相关前端实现国际化

步骤1.引入相关的js文件 1、strings\_zh.properties (表示中文属性文件)新创 2、strings.properties

悠悠/ 2021年10月08日 06:58/ 0 赞/ 410 阅读