什么是多语言？
我们平时访问一些文档类型的网站时，经常可以看到页面右上角有一个下拉框用来选择当前页面支持的语言，并在选中后将整个网页的内容切换为选中的语言，这就是项目中的多语言，多语言可以根据浏览器请求发送的语言类型在服务器进行设置，也可以在请求服务器时返回多种语言，并根据权重和浏览器的支持情况进行选择和渲染。
功能描述
在本文中我们通过客户端向服务器发送请求告诉服务器客户端所支持的语言及权重，服务器检索语言包并根据客户端发送的语言类型和权重返回对应语言的内容。
在这个过程中客户端向服务器发送请求需要使用请求头 Accept-Language，值中设置语言类型和权重，语言与语言之间使用 , 隔开，语言与权重之间使用 ; 隔开，权重用 q 表示，与值用 = 隔开，如果权重值为 1 则可省略（最大值），值的格式为 zh-CN, zh;q=0.7, en;q=0.8, fr;q=0.1。
服务器响应时，应通过响应头告诉浏览器返回的内容为何种语言，响应头为 Content-Language, 值的格式为 zh-CN, en，多个语言之间使用 , 隔开。
服务器的实现
文件：server.js
const http = require("http");
const querystring = require("querystring");
// 语言包
let languagesPackage = {
"zh-CN": "你好",
en: "Hello",
fr: "Bonjour"
};
// 默认语言为英语
languagesPackage.defaultLanguage = "en";
// 创建服务器
let server = http.createServer((req, res) => {
// 获取请求头中的语言和权重
let languages = req.headers["accept-language"];
// 如果客户端设置了语言
if (languages) {
// 解析语言为 [{ name: 'zh-CN', q: 1 }, { name: 'en', q: '0.8' }] 格式
let lans = languages
.split(",")
.map(lang => {
let [name, q = 1] = Object.keys(
querystring.parse(lang.tirm(), ";q=")
);
return { name, q };
})
.sort((a, b) => b.q - a.q); // 并按照权重逆序排序
// 循环检测 languagesPackage 是否存在客户端的语言
for (let i = 0; i < lans.length; i++) {
let { name } = lans[i];
let content = languagesPackage[name];
// 如果存在直接设置响应头并返回内容
if (content) {
res.setHeader("Content-Type", name);
return res.end(content);
}
}
}
// 如果客户端没设置语言活语言找不到时返回服务器设置的默认语言
res.setHeader("Content-Type", languagesPackage.defaultLanguage);
res.end(languagesPackage[languagesPackage.defaultLanguage]);
});
server.listen(3000, () => {
console.log("server start 3000");
});
其实上面服务器和客户端配合实现多语言的思路就是客户端向服务器发送 Accept-Language 告诉服务器需要的语言和权重，服务器解析后根据权重从大到小排序，然后循环判断语言包中是否含有客户端需要的语言，如果有，则中断循环直接设置响应头和返回对应内容，如果不存在客户端的需要的语言或者客户端没有向后台发送 Accept-Language 则返回服务器默认设置的语言类型和内容。
验证多语言
为了方便我们使用 curl 模拟客户端向服务器发送请求查看返回内容是否正确，之所以使用 curl 是因为只发送验证的请求，方便设置 Accept-Language 请求头，更灵活的控制多语言的类型和权重。
启动服务器 server.js，打开命令行窗口，输入下面的命令执行，查看返回命令行响应体中的内容和设置的语言是否对应。
复制代码 代码如下:curl -v --header “Accept-Language: zh-CN, zh;q=0.7, en;q=0.8, fr;q=0.1” http://localhost:3000
总结
这样我们就实现了一个简单的多语言，其实真正的多语言在服务器是需要做繁琐的解析和性能优化的（只解析界面有的单词返回，保证响应体中的内容最小），在前端可以通过 JavaScript 的库 il8n（国际化语言包）来实现。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。