何为i18n?
系统支持多语言的功能称之为国际化,英文为 internationalization
一共18个字母,简称i18n
。随机近些年国内市场饱和,各厂商纷纷出海,i18n
成了必要的能力。
如何做?
简单介绍下思路,就不过多粘代码了,其实没啥黑科技。
常见维度
语言文字、货币类型、时间格式、数字格式。。。
基本原理
可以通过用户IP、浏览器语言等用户当前信息初始化用户的语言、货币类型,同时支持用户在系统内通过内置功能个性化修改,然后保存至cookie,前端使用时从cookie取即可,之所以保存到cookie是为了方便携带给server端。
语言文字
其实本质上就是事先生成一份针对不同语种的静态数据配置。
比如:
{
"zh-CN": {
"key1": "你好",
"key2": "苹果"
},
"en-US": {
"key1": "hello",
"key2": "apple"
}
}
然后通过 json[language][key]
在项目中使用即可。
至于配置存放的地方,npm包、cdn、数据库都可以,视业务场景选择。
保存位置 | 适用场景 |
---|---|
npm包 | 实时更新频率低、SSR页面 |
cdn | 实时更新频率高、CSR页面 |
数据库 | server端使用 |
数字、货币、时间
toLocaleString
toLocaleString()
是 JavaScript 中的一个非常有用的方法,它主要用于日期 (Date) 和数字 (Number) 对象,以本地化的方式显示值。这个方法可以根据用户的语言环境和地区设置返回一个字符串表示形式,且浏览器兼容性较好,非常适合用于国际化应用中。
- Number.prototype.toLocaleString() 处理货币和数字格式
- Date.prototype.toLocaleString()处理时间格式
Intl
Intl
对象是 ECMAScript 国际化 API 的一个命名空间,它提供了精确的字符串对比、数字格式化,和日期时间格式化等api,但是部分对象属性可能存在浏览器兼容的问题。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl