【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>

简略的效果图：

扫描二维码关注公众号，回复： 15945747 查看本文章

完结散花

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

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

猜你喜欢