美文网首页
多语言切换实现

多语言切换实现

作者: Leonard被注册了 | 来源:发表于2020-01-30 17:50 被阅读0次

           为了顺应国际化的脚步,有时会碰到多语言切换的需求,例如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?

    相关文章

      网友评论

          本文标题:多语言切换实现

          本文链接:https://www.haomeiwen.com/subject/wvrithtx.html