国际化示例

「爱情、让人受尽委屈。」 2022-05-28 23:28 197阅读 0赞

html代码

<p class="interpret">中国</p>
    <p class="interpret">美国</p>
    <p class="interpret">德国</p>
    <p><button id="toggle" class="interpret">切换语言</button></p>

方式1：维护两个对象，利用p中的内容，遍历找到对应的key,然后切换语言。

let boolean = true;
    let p = document.getElementsByClassName("interpret");
    
        let obj_e = {
            "china":'china',
            "america":'america',
            "germany":'germany',
            "toggle language":'toggle language'
        };
        let obj_c = {
            "china":'中国',
            "america":'美国',
            "germany":'德国',
            'toggle language':"切换语言"
        };
    
        document.getElementById('toggle').onclick = function () { 
            for(let i=0;i<p.length;i++){
                if(boolean){
                    let text = p[i].innerHTML;
                    for(let key in obj_c){
                        if(text == obj_c[key]) p[i].innerHTML = obj_e[key];
                    }
                }else{
                    let text = p[i].innerHTML;
                    for(let key in obj_e){
                        if(text == obj_e[key]) p[i].innerHTML = obj_c[key];
                    }
                }
            }
            boolean = !boolean;
        }

方式二：维护两个对象，以p中的内容为key,切换语言。
    
    这里用汉字作key，普适的方法应该是把汉字转为unicode，这样对任何语言就没有限制了，然后用处理过的unicode做key。

let boolean = true;
    let p = document.getElementsByClassName("interpret");
        let obj_c = {
            "中国":'china',
            "美国":'america',
            "德国":'germany',
            "切换语言":'toggle language'
        };
        let obj_e = {
            "china":'中国',
            "america":'美国',
            "germany":'德国',
            'toggle language':"切换语言"
        };
    
        document.getElementById('toggle').onclick = function () { 
           if(boolean){
               for(let i=0;i<p.length;i++){
                   let text = p[i].innerHTML;
                   if(obj_c[text]) p[i].innerHTML = obj_c[text];
               }
           }else {
               for(let i=0;i<p.length;i++){
                   let text = p[i].innerHTML;
                   if(obj_e[text]) p[i].innerHTML = obj_e[text];
               }
           }
           boolean = !boolean;
       }

小结  
方式一采用遍历的方法，翻译显然会更慢,运行时间为On，但其扩展性强，适合多种语言。再添加一种语言只需要增加一个语言对象就ok了。  
方式二采用key值的方式，不用遍历，运行时间为O1,适合两种语言之间的翻译。当然如果需要多种语言翻译，也是可以的。需要增加一些判断。如果采用某些设计模式，也会优于第一种方式。

//unicode 转换
    // 转为unicode 编码 
    function encodeUnicode(str) {   
        var res = [];  
        for ( var i=0; i<str.length; i++ ) {  
        res[i] = ( "00" + str.charCodeAt(i).toString(16) ).slice(-4);  
        }  
        return "\\u" + res.join("\\u");  
    }  
    
    // 解码 
    function decodeUnicode(str) {   
        str = str.replace(/\\/g, "%");  
        return unescape(str);  
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关多语言国际化挑战：Java与国际化API如ResourceBundle的交互示例

在Java中，处理多语言国际化主要依赖于`java.util.ResourceBundle`类。下面是一个简单的示例： 1. 创建资源包（通常放在`res`或`lang`目录

￡神魔★判官ぃ/ 2024年12月04日 07:48/ 0 赞/ 29 阅读

相关多语言支持挑战：Java国际化API使用示例

Java国际化API，即Java Internationalization (JI) API，主要用于处理和管理多语言环境。以下是一个简单的使用示例： 1. 导入相关包： `

- 日理万妓/ 2024年11月26日 11:00/ 0 赞/ 62 阅读

相关 Java国际化和本地化：日期格式转换示例

Java中的国际化（Internationalization）和本地化（Localization）是指使软件能够适应不同语言和地区的过程。在处理日期和时间时，不同的地区有不同的

亦凉/ 2024年11月09日 15:21/ 0 赞/ 88 阅读

相关国际化挑战：Java程序处理多语言环境示例

在Java程序中处理多语言环境，可以使用国际化（Internationalization, I18N）和本地化（Localization, L10N）的概念。以下是一个简单的示

痛定思痛。/ 2024年10月12日 17:39/ 0 赞/ 78 阅读

相关 Flutter 主题修改及语言国际化示例

文章目录主题示例国际化主题 > 上个月微信`iOS`版本推出了`暗色主题`，那么`Fl

深藏阁楼爱情的钟/ 2023年07月18日 06:38/ 0 赞/ 29 阅读

相关 Android国际化-图片国际化和文本字符国际化

注意： 1、是在res目录下面，新建文件夹 2、需要国际化的文本资源和图片资源名称是一样的图片国际化默认：drawable-xhdpi 中文简体

Love The Way You Lie/ 2022年07月15日 00:24/ 0 赞/ 322 阅读

相关 Android国际化-图片国际化和文本字符国际化

注意： 1、是在res目录下面，新建文件夹 2、需要国际化的文本资源和图片资源名称是一样的图片国际化默认：drawable-xhdpi 中文简体

绝地灬酷狼/ 2022年07月15日 00:24/ 0 赞/ 302 阅读

相关国际化示例

html代码 <p class="interpret">中国</p> <p class="interpret">美国</p> <p class

「爱情、让人受尽委屈。」/ 2022年05月28日 23:28/ 0 赞/ 198 阅读

相关 SpringMVC国际化

实现SpringMVC国际化的步骤：第一步：首先要导入两个jar包（jstl.jar和stands.jar）第二步：配置好对应的资源文件（.properties）

一时失言乱红尘/ 2022年05月14日 14:29/ 0 赞/ 316 阅读

相关 SpringBoot国际化处理示例（一）—— 浏览器环境下切换语言

有的项目中需要根据环境切换不同的语言，使用国际化可以轻松解决下面简单介绍在SpringBoot中简单使用国际化的示例，并结合源码分析 1. 第一步，引入Thymele

àì夳堔傛蜴生んèń/ 2022年01月31日 04:23/ 0 赞/ 481 阅读