多语言切换实现

       为了顺应国际化的脚步,有时会碰到多语言切换的需求,例如Amazon官网上的这一幕


       那么为了协商使用何种语言显示页面,就可以通过Accept-Language检测浏览器的语言(每种语言类型用逗号进行分隔,其权重值由分号进行分隔,未设置的权重默认为1)
请求头字段Accept-Language

接着用代码简单模拟一遍实现流程~~

  • 准备好语言包后首先将Accept-Language解析成一个个对象并存入数组当中。每个对象都含有两个属性:语言类型和权重值
  • 按照权重值从大到小对数组进行排序
  • 依次将数组中每个对象的语言类型与服务端的语言包进行匹配,一旦匹配成功则结束遍历,否则按默认语言类型返回数据
let http = require('http');
let server = http.createServer(request);
server.listen(8080);
// 简单版的语言包
const lanPack = {
    en: {
        title: 'Hey,bro'
    },
    zh: {
        title: '嘿,兄弟'
    },
    default: 'en'
}
function request(req, res) {
    // 实现服务器和客户端的协议,选择客户端最想要的,并且服务器刚好有的
    // Accept-Language: en,zh-CN;q=0.9,zh;q=0.8
    let acceptLanguage = req.headers['accept-language'];
    if (acceptLanguage) {
        const lans = acceptLanguage.split(',').map(function (item) {
            let values = item.split(';');
            let name = values[0];
            let q = values[1] ? parseFloat(values[1].split('=')[1]) : 1;
            return {
                name, q
            }
        }).sort((a, b) => b.q - a.q);
        let lan = lanPack.default;// 默认语种
        console.log(lans); // [ { name: 'en', q: 1 },  { name: 'zh-CN', q: 0.9 },  { name: 'zh', q: 0.8 } ]

        for (let i = 0; i < lans.length; i++) {
            // 如果说此语言在语言包里有,那么就使用此语言
            if (lanPack[lans[i].name]) {
                lan = lans[i].name;
                break;
            }
        }
        res.end(lanPack[lan].title);
    }
}

最后,补充一下,如果想要修改Accept-Language中的优先顺序,可以参考Chrome浏览器如何修改Accept Language?

你可能感兴趣的:(多语言切换实现)