关键词：
壹 ? 引
最近项目要求支持国际化多语言，由于项目用的还是angularjs，那么首当其冲的选择了angularjs封装的I18N插件angular-translate，本文主要会从三个方向展开讨论，一是基本用法，怎么用，代码是什么意思；二是问题解答，比如$translate.instant()为什么没效，怎么在JS程序中使用多语言等；第三便是提供我的解决方案，供大家参考，那么本文开始。
贰 ? 基本用法
由于是三方插件，自然要下载才能使用，请大家在项目目录下执行npm i angular-translate命令，下载多语言相关依赖包，OK下载完成后在node_modules文件夹中可以看到如下内容：
文件虽多，我们需要用到的其实只有angular-translate.min.js与angular-translate-loader-static-files目录下的angular-translate-loader-static-files.min.js。
所以第一步，在HTML文件中引入相关资源，如下：
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-translate/dist/angular-translate.js"></script>
<script
src="node_modules/angular-translate/dist/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
在项目目录下新建一个language文件夹，用于存放我们的语言列表，这里我们就建两个，一个中文一个英文，如下：
我们在en.json中添加如下代码
"name": "echo",
"age": "twenty-seven"
我们在zh.json中添加如下代码：
"name": "听风",
"age": "27"
好的，现在我们创建HTML页面主体部分，以及对应的controller，如下：
<body ng-controller="myCtrl as vm">
<p>"name"|translate</p>
<p translate="age"></p>
<select name="" id="" ng-model="vm.language" ng-change="vm.change()">
<option value="en">英文</option>
<option value="zh">中文</option>
</select>
</body>
angular.module(‘myApp‘, [‘pascalprecht.translate‘])
.controller(‘myCtrl‘, [‘$translate‘, function ($translate)
var vm = this;
vm.language = "zh";
vm.change = function ()
$translate.use(vm.language);
;
])
.config(function ($translateProvider)
// 读取本地JSON文件，prefix代表文件路径前缀，suffix代表文件后续
$translateProvider.useStaticFilesLoader(
prefix: ‘./language/‘,
suffix: ‘.json‘
);
// 设置默认的语言
$translateProvider.preferredLanguage(‘zh‘);
);
angullarjs其它部分大家执行搭建，做到这一步，利用live-server启动本地服务器（其它本地服务器也行）打开页面，尝试切换select选项，可以发现我们已经实现了一个简单的多语言了。
那么现在我们来解释下上述代码是什么意思，做了什么。
首先在HTML中我用了两种方式来显示多语言，一种是表达式，一种是指令形式，两种皆可，官方推荐使用指令会更好，不过有特殊情况只能用表达式，这点后面我们再说。而在代码中的name与age其实就是对应了JSON文件中数据的key，这点不难理解。
对于JS代码，第一步就是得在module中加入pascalprecht.translate模板，这样我们才能通过config对多语言进行初步配置，比如$translateProvider.preferredLanguage(‘zh‘)这一句用来设置多语言的默认语言，例子中默认的就是中文。
而$translateProvider.useStaticFilesLoader这一句其实对应了我们在HTML中引用的angular-translate-loader-static-files文件，它的作用就是用来导入项目中的其它静态文件，毕竟引用了JSON，后程序才有可供查找的语言列表；另外属性prefix用来描述文件路径，suffix用来描述你需要引用文件的后缀。
细心的同学一定想问，那程序怎么知道要去哪个JSON文件中去查呢，在上述代码config与controller分别有这两段，作用都是告诉translate应该用哪个语言表查询：
$translate.use(vm.language);
$translateProvider.preferredLanguage(‘zh‘);
再看select中option赋予的值，不是正好与我们的JSON文件名相同吗。那么关于translate基础介绍说到了，下面来聊聊使用中会遇到哪些问题。
叁 ? 进阶用法与部分问题解答
叁 ? 壹 translate key/value包含变量
我们在上文的例子中，translate查找所用的key是一个确切的值，其实说到底，所谓translate国际化，就是在不同的语言表中定义相同的key名，再根据用户操作切换不同的表作为查找根据而已。
那么问题来了，假设我们在使用时写在HTML上的key是个变量怎么办呢？不留悬念，直接看下面的例子：
我们在controller中添加如下代码：
vm.myName = ‘name‘;
然后在HTML中添加如下两行：
<p>vm.myName|translate</p>
<p translate="vm.myName"></p>
刷新页面，可以看到生效了，这里我们就是将key赋予了一个变量，通过上述两种方式能解析key为变量的情况。
对应的，那么假设JSON配置的value中包含变量怎么办呢，直接看下面这个例子：
我们在JSON中英文中分别添加如下代码：
// en.json
"sayName":"my nam is userName"
// zh.json
"sayName":"我的名字是userName"
在HTML中添加如下代码：
<p> ‘sayName‘ | translate:‘ userName: "听风是风" ‘ </p>
<p translate="sayName" translate-values=‘ userName: "听风是风"‘></p>
<p translate="sayName" translate-value-user-name=‘听风是风‘></p>
其实说到底就是为过滤器传递罢了，考虑到vaule中包含多个变量的情况，如果全写在HTML上就不太美观了，所以我们可以将值定义成一个对象，我们分别在controller与HTML中添加如下代码：
vm.userName =
userName: ‘听风是风‘
;
<p> ‘sayName‘ | translate:vm.userName</p>
<p translate="sayName" translate-values=‘vm.userName‘></p>
其实效果还是一样，看着也舒服了很多，万一存在多个变量，咱们也是为controller中的对象添加属性而已。
叁 ? 贰 在controller中使用国际化
上面例子举了一大堆，其实都是在HTML上使用过滤器实现语言国际化，那么问题来了，假设我在controller中有一个弹窗，弹窗内容也得支持国际化，这个文本咋整呢？我们使用$translate.instant()方法，看个例子：
请分别在HTML于controller中添加如下代码：
<button ng-click="vm.alert()">点我</button>
vm.alert = function ()
let msg = $translate.instant(‘sayName‘,
userName: ‘echo‘
);
alert(msg);
;
这里大家自行测试，说直白点，$translate.instant接受了两个参数，第一个是你要找的key，第二个参数是传递给JSON文件中变量的值。
问题来了，有的同学说为啥我的$translate.instant无效，就是获取不到，大家直接在controller外层添加如下代码，注意，不要用事件去包裹它，看看控制台打印结果：
let msg = $translate.instant(‘sayName‘,
userName: ‘echo‘
);
console.log(msg);//sayName
可以看到直接输出了key，并没找到我们想要的值，这是因为translate加载JSON并查找的过程是一个异步，大家可以修改加载语言引用的逻辑，比如将config修改成如下代码：
.config(function ($translateProvider)
// 注册语言表
$translateProvider
.translations(‘en‘,
"sayName": "my nam is userName"
)
.translations(‘zh‘,
"sayName": "我的名字是userName"
);
// 设置默认的语言
$translateProvider.preferredLanguage(‘zh‘);
);
OK，再刷新页面看看控制台，我们发现成功获取到了。
有同学就不乐意了，这样做虽然解决了语言表异步的问题，但是语言表一旦多了，看着就非常不美观了。没事，咱们再将config改回到最初的样式，然后在controller中添加如下代码：
$translate(‘sayName‘,
userName: ‘echo‘
).then(function (resp)
console.log(resp)
, function (err)
console.log(err)
);
$translate(key)方法返回一个promise，也就是说即便文件引用是异步的情况，我们通过这种方式也能成功获取到想要的语言内容，当然缺点也非常明显，每次做查询都得写promise回调，代码看着非常不爽。那么贴上最后的解决方法，给大家做个参考。
肆 ? 仅供参考的方案
HTML中我就不说了，主要说说config，我的写法是这样：
.config(function ($translateProvider)
// 获取语言模块
let enLanguage = require("../language/en.js");
let zhLanguage = require("../language/zh.js");
// 注册语言表
$translateProvider
.translations(‘en‘, enLanguage.language)
.translations(‘zh‘, zhLanguage.language);
// 设置默认的语言
$translateProvider.preferredLanguage(‘zh‘);
);
而语言表就不是放在JSON文件中了，而是放在了两个JS文件中进行管理，这里我借用了mod.js让JS模块化，代码如下：
//en.js
exports.language =
"sayName": "my nam is userName"
//zh.js
exports.language =
"sayName": "我的名字是userName"
这么做的好处其实就两点，第一语言有独立的文件进行管理，便于后期维护；第二解决了文件加载查询异步问题，在controller中我们获取多语言就非常方便。
最后提一点，假设我们在中文中配置了一个key，因为疏忽导致在英文中忘记配置了这个key，那么用户在切换语言时因为找不到对应的key，这就会加载失败，官方在config中还提供了一个非常棒的方法，直接上代码：
$translateProvider
.translations(‘en‘, enLanguage.language)
.translations(‘zh‘, zhLanguage.language)
.fallbackLanguage([‘en‘, ‘zh‘]);
fallbackLanguage的作用就是，假设一个key查找失败，那么angular-translate就会以[‘en‘, ‘zh‘]为替补语言进行查找，以此来保证某个key找不到，你的页面至少是有一种候补语言能展示出来。
那么关于angular-translate的使用介绍就说到这里了，本文结束。
django国际化(多语言)(代码片段)
1settings.pyMIDDLEWARE=(‘django.contrib.sessions.middleware.SessionMiddleware‘,#‘corsheaders.middleware.CorsMiddleware‘,‘django.middleware.locale.LocaleMiddleware‘,#中间件加上Django国际化中间件‘django.middleware 查看详情
springboot多语言
springboot-参数验证提示语言动态变化的实现https://www.jianshu.com/p/dbf0400b2175SpringBoot整合国际化I18nhttps://www.2cto.com/kf/201905/808080.html我们公司的springboot国际化（多语言）解决方案，有demohttps://blog.csdn.net/pangdongh/article/de 查看详情
android国际化多语言切换(代码片段)
关于App国际化，之前有讲到国际化资源、字符换、布局相关，想要了解的猛戳用力抱一下APP国际化。借着本次重构多语言想跟大家聊一下多语言切换，多语言切换对于一款国际化App来讲是重中之重，并非难事，... 查看详情
java:jsp:resourcebundle国际化多语言
java提供了一个资源类java.util.ResourceBundle来试下多国语言版本。其实ResourceBundle只是一个抽象的类，她有两个子类：ListResourceBundle,和,PropertyResourceBundle.前一个子类需要编写不同的国家语言信息放置在对象类中，下面将实例演示，... 查看详情
低代码平台多语言国际化（i18n）技术方案
国际化（Internationalization，简称i18n）：指软件开发应当具备支持多种语言和地区的功能。也就是说能够具备切换页面显示语言的功能。i18n，其中“I”和“n”分别为首末字符，18则为中间的字符数。低代码平台/零代码平台中使用... 查看详情
javafx:多语言适配(代码片段)
JavaFX:多语言适配JDK国际化：ResourceBundle.html其他资源：TornadoFX编程指南，第10章，FXML和国际化、JavaFX的ResourceBundle使用创建ResourceBundle资源ResourceBundle获取资源publicclassResourceBundleUtilprivatestati 查看详情
#前后端国际化多语言配置(代码片段)
前后端国际化多语言配置前端（VueElementUI）项目前端使用Vue+Elementui编写i18n.js在这个js中引入ElementUI的多语言资源，引入本地的多语言资源//I18nimportVueI18nfrom'vue-i18n'importVuefrom'vue'importlocalefrom'element-ui/l... 查看详情
ios多语言本地化(国际化)设置
讨论的iOS应用中的多语言设置，Ok一般是两种情况：1.根据当前设备语言自动切换显示2.在应用中可进行语言设定至今，我个人做过的项目中有6个是涉及到多语言的，其中全部都是需要在应用中可进行设置。其实也... 查看详情
多语言国际化(代码片段)
国际化多语言支持是现在系统通常都要具备的功能，Vue对国际化提供了很好的支持。1.安装依赖首先需要安装国际化组件，执行yarnaddvue-i18n命令，安装i18n依赖。2.添加配置在src下新建i18n目录，并创建一个index.js.importVuefrom‘vue‘im... 查看详情
国际化intlflutter国际化多语言实践(代码片段)
目标：实现flutter国际化提示：这里参考一下几个链接例如：https://github.com/ThinkerWing/languagehttps://juejin.cn/post/6844903823119482888这篇也很详细，还有包括兼容中文的繁体简体…可以看看feat/use-Flutter-Intl该分支对应的提交... 查看详情
ios-国际化(多语言设置)
参考技术A如上点击“＋”号会弹出所提供的语言，选择所需要的语言就可以了第二步：创建Localizable.strings(注意：文件名最好不要随意更改，以免带来不必要的麻烦)作为多语言对应的词典，存储多重语言。（1）点击Localizable.stri... 查看详情
react项目多语言国际化：react-i18next插件实现——本地数据篇(代码片段)
如何理解多语言国际化？图片中下拉部分已经清楚的说明了多语言国际化是什么了。个人理解：它就是我们在网站上可以通过切换语言类型来实现同一功能的不同语言展示效果。react-i18next介绍react-i18next是一个强大的React/ReactNativ... 查看详情
ios国际化多语言（上）
参考技术A这里介绍的方法只是根据系统语言变化demoiOS国际化多语言（下）获取Info.plist文件中key的方法：选中Info.plist-->右键选中OpenAs-->SourceCode注意：选中PropertyList恢复列表样注意：如果创建.strings文件是自定义的名字的话... 查看详情
qt系列文章之三十九(qt多语言国际化程序实例设计实现)
关注我的公众号，可免费看全本Qt系列文章~文章目录概述tr()函数的使用生成语言翻译文件使用QtLinguist翻译ts文件调用翻译文件改变界面语言生成qm文件项目启动时设置界面语言动态切换语言效果图demo获取概述 有些软件需要... 查看详情
qt系列文章之三十九(qt多语言国际化程序实例设计实现)
关注我的公众号，可免费看全本Qt系列文章~文章目录概述tr()函数的使用生成语言翻译文件使用QtLinguist翻译ts文件调用翻译文件改变界面语言生成qm文件项目启动时设置界面语言动态切换语言效果图demo获取概述 有些软件需要... 查看详情
ios国际化(多语言)(代码片段)
一、应用程序国际化包括app名称和各种权限的提示文字。1.1创建工程，再在“PROJECT”的“Info”里面，添加所需语言。1.2从代码中分离出文本创建一个“.strings”扩展名的文件来本地化字符串，需要把这些字符串全部... 查看详情
ios多语言本地化(国际化)设置
...f0c;切换下)—>Info—>Localizations—>设置多语言环境2.国际化应用名称(1)创建InfoPlist.string，并进行Localization配置:在项目中点击New 查看详情
vue项目中实现多语言国际化(i18n）
参考技术A现在项目中很多情况下需要实现国际化，即多语言。比较常用的就是中/英文的切换。普遍常用的就是I18N了，怎么实现呢？莫急，咱们往下瞅！第一步：安装第二步：在src目录下新建一个lang文件一般有三个文件：index.js... 查看详情