JavaScript国际化

如题,需求针对不同国家的人显示不同语言,常见的Case就是中英文切换。

设计思路,针对一些公共的控件描述定义不同的语言包,按国籍选择加载不同的语言包。

实现:

scripts文件夹下,新建中英文对应语言包,locales/en-US/Message.js,locales/zh-CN/Message.js

代码如下: 

//locales/en-US/Message.js
export default {
    'msg.ok': 'OKAA',
    'msg.cancel': 'CancelAA',

};
//locales/zh-CN/Message.js
export default {
    'msg.ok': '确认A',
    'msg.cancel': '取消A',

};

调用语言包时先引入:

window.msg = await import('/Scripts/locales/zh-CN/Message.js');

访问语言包里的属性:

msg.default['msg.ok']

如图:

如下图,使用提示框按照语言包加载确认按钮

提示框官网链接如下:

https://www.sweetalert2.cn/

 仅供学习参考,如有侵权联系我删除

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 提供了一种简单而强大的国际化支持机制。它使用了一种称为 "文本替换" 的方法来实现国际化,通过在 HTML 标记中使用特定的标记来标识需要翻译的文本,然后在 JavaScript 中定义这些文本的翻译内容。 下面是使用 Bootstrap 国际化的步骤: 1. 引入 Bootstrap 和相关的语言文件。你可以从 Bootstrap 的官方网站下载所需的语言文件。 2. 在 HTML 标记中使用翻译标记。将需要翻译的文本用 `<span>` 或其他适当的标记包裹起来,并给它们添加 `data-translate` 属性,值为你定义的翻译键。 ```html <span data-translate="hello">Hello</span> ``` 3. 在 JavaScript 中定义翻译内容。创建一个 JavaScript 对象,将翻译键和对应的翻译文本作为键值对存储在对象中。 ```javascript var translations = { hello: "你好" }; ``` 4. 初始化国际化。在页面加载完成后,通过遍历所有带有 `data-translate` 属性的元素,并根据其属性值在翻译对象中查找对应的翻译文本。 ```javascript function translatePage() { var elements = document.querySelectorAll('[data-translate]'); for (var i = 0; i < elements.length; i++) { var key = elements[i].getAttribute('data-translate'); if (translations[key]) { elements[i].innerText = translations[key]; } } } window.onload = translatePage; ``` 这样,当页面加载完成时,Bootstrap 会自动根据定义的翻译内容替换标记中的文本,实现国际化效果。你可以根据需要定义更多的翻译键和对应的翻译文本。 需要注意的是,这只是 Bootstrap 国际化的一种实现方式,你可以根据具体需求选择适合的国际化方案。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值