【js实现语言国际化】使用json配置文件实现&使用翻译api实现

来自湖南的阿晨

已于 2023-10-13 11:01:49 修改

阅读量946

点赞数 1

分类专栏： Javascript与ES6~ html5 && css3 && 浏览器文章标签： javascript 开发语言 ecmascript

于 2023-07-16 10:48:17 首次发布

本文链接：https://blog.csdn.net/weixin_52479803/article/details/131726310

版权

Javascript与ES6~ 同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

html5 && css3 && 浏览器

31 篇文章 1 订阅

订阅专栏

把页面成国际化，实现中英文切换，网上找了一些中英文切换的解决方案，大概为如下两种：

使用翻译Api进行翻译

只须调用接口，即可轻松完成整站翻译，翻译准确度还行，肯能需要付费

自己编写中英文对照表，用js控制

一对一翻译，所以准确度最高。需要编写大量中英文对照表，只适合于少量的固定翻译

使用json配置文件实现

需求：使用js让项目实现中文简体、繁体跟英文的切换，实现语言国际化

首先准备三种json配置文件：

en.json

{
  "textOne": "Today is Monday",
  "textTwo": "Tomorrow is Tuesday",
  "textThree": "The day after tomorrow is Wednesday",
  "textFour": "Then comes Thursday",
  "textFive": "Finally, Friday"
}

zh-cn.json

{
  "textOne":"今天是周一",
  "textTwo":"明天是周二",
  "textThree":"后天是周三",
  "textFour":"然后是周四",
  "textFive":"最后是周五"
}

zh-tw.json

{
  "textOne": "今天是週一",
  "textTwo": "明天是週二",
  "textThree": "後天是週三",
  "textFour": "然後是週四",
  "textFive": "最後是週五"
}

准备html页面，记得引入jQuery

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="selectBox">
        <select id="language-select">
            <option value="zh-cn">中文简体</option>
            <option value="zh-tw">中文繁体</option>
            <option value="en">English</option>
        </select>
    </div>
    <div class="textBox">
        <span id="textOne">今天是周一</span>
        <span id="textTwo">明天是周二</span>
        <span id="textThree">后天是周三</span>
        <span id="textFour">然后是周四</span>
        <span id="textFive">最后是周五</span>
    </div>

</body>

</html>

准备js，我分了两个js文件，第一个是给下拉框绑定事件，然后将选择的语言存入到浏览器缓存中；第二个是获取缓存中的语言类型，然后加载对应的语言文件，循环传来的id数组，通过$("#xxx" ).text();来重新赋值文本

selectLang.js

$(function () {
    // 获取语言选择框和内容容器
    var languageSelect = $('#language-select');

    // 将语言选择存储到本地
    var saveLanguageSelection = function(language) {
        localStorage.setItem('language', language);
    };

    // 监听语言选择框的变化事件
    languageSelect.on('change', function() {
        var selectedLanguage = $(this).val();
        saveLanguageSelection(selectedLanguage);
        location.reload();
    });

    // 加载保存的语言选择
    var selloadLanguageSelection = function () {
        var selectedLanguage = localStorage.getItem('language');
        if (selectedLanguage) {
            languageSelect.val(selectedLanguage);
        }
    };
    // 加载保存的语言选择
    selloadLanguageSelection();
})

loadLang.js

var ids = []
//获取动态id
var getID = function (data){
    ids = data
}
$(function () {

    // 加载保存的语言选择
    var loadLanguageSelection = function () {
        var selectedLanguage = localStorage.getItem('language');
        if (selectedLanguage) {
            changeLanguage(selectedLanguage);
        }
    };

    // 切换语言
    var changeLanguage = function(language) {
        $.getJSON("./data/" + localStorage.getItem('language') + ".json", function(data) {
            updateText(data);
        });
    };
    // 更新页面文本
    var updateText = function(data) {
        // 使用语言文件中的对应文本更新页面元素
        updateTextByIds(ids, data); // 更新文本
    }

    // 根据标签id数组更新文本
    var updateTextByIds = function(ids, data) {
        for (var i = 0; i < ids.length; i++) {
            $("#" + ids[i]).text(data[ids[i]]);
        }
    }

    // 加载保存的语言选择
    loadLanguageSelection();
})

在html中使用js文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="./js/selectLanguage.js"></script>
    <script src="./js/loadLanguage.js"></script>
</head>

<body>
    <div class="selectBox">
        <select id="language-select">
            <option value="zh-cn">中文简体</option>
            <option value="zh-tw">中文繁体</option>
            <option value="en">English</option>
        </select>
    </div>
    <div class="textBox">
        <span id="textOne">今天是周一</span>
        <span id="textTwo">明天是周二</span>
        <span id="textThree">后天是周三</span>
        <span id="textFour">然后是周四</span>
        <span id="textFive">最后是周五</span>
    </div>
    <script>
        if (!localStorage.getItem('language')) {
            localStorage.setItem('language', 'zh-cn');
        }
        document.addEventListener("DOMContentLoaded", function () {
            var dynamicIds = [];
            $.getJSON("./data/" + localStorage.getItem('language') + ".json", function (data) {
                Object.keys(data).forEach(function (key) {
                    if (key.startsWith('text')) {
                        dynamicIds.push(key);
                    }
                });
                getID(dynamicIds);
            });
        });
    </script>
</body>

</html>

简略的效果图：

使用翻译api实现

有道翻译api：产品文档-自然语言翻译服务

记得创建一个应用，获取对应的密钥跟密码

代码展示：

<!doctype html>

<head>
    <meta charset="utf-8" />
</head>

<body>
    <span id="text">妈妈</span>
    <div>可打开浏览器控制台查看结果</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.0.0/crypto-js.js"></script>
    <script type="text/javascript">
        var appKey = '5d90665d0655e23d';
        var key = 'tTMpW8Z5d6xzcF3wiZobvTZyu6PbpzmN';
        var salt = (new Date).getTime();
        var curtime = Math.round(new Date().getTime() / 1000);
        // 要翻译的文本内容
        var query = $("#text").text();
        // 源语言的语种
        var from = 'zh-CHS';
        // 目标语言的语种
        var to = 'en';
        // 拼接需要进行签名的字符串
        var str1 = appKey + truncate(query) + salt + curtime + key;
        // 使用CryptoJS库计算签名
        var sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);
        $.ajax({
            url: 'https://openapi.youdao.com/api',
            type: 'post',
            dataType: 'jsonp',
            data: {
                q: query,
                appKey: appKey,
                salt: salt,
                from: from,
                to: to,
                sign: sign,
                signType: "v3",
                curtime: curtime
            },
            success: function (data) {
                console.log(data.translation[0]);
            }
        });
        function truncate(q) {
            var len = q.length;
            if (len <= 20) return q;
            return q.substring(0, 10) + len + q.substring(len - 10, len);
        }
    </script>
</body>

效果图：