前端如何支持i18n?

何为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) 对象,以本地化的方式显示值。这个方法可以根据用户的语言环境和地区设置返回一个字符串表示形式,且浏览器兼容性较好,非常适合用于国际化应用中。

Intl

Intl 对象是 ECMAScript 国际化 API 的一个命名空间,它提供了精确的字符串对比、数字格式化,和日期时间格式化等api,但是部分对象属性可能存在浏览器兼容的问题。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl

相关推荐

  1. I18N/L10N 历史 / I18N 指南 / libi18n 模块说明

    2024-07-20 15:06:01       26 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 15:06:01       171 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 15:06:01       189 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 15:06:01       157 阅读
  4. Python语言-面向对象

    2024-07-20 15:06:01       170 阅读

热门阅读

  1. Linux下载网络文档

    2024-07-20 15:06:01       33 阅读
  2. 网络爬虫基础介绍

    2024-07-20 15:06:01       34 阅读
  3. Linux内存从0到1学习笔记(8.20 ION (二))

    2024-07-20 15:06:01       37 阅读
  4. 基于 Go1.19 的站点模板爬虫:构建与实战

    2024-07-20 15:06:01       36 阅读
  5. Redis

    Redis

    2024-07-20 15:06:01      34 阅读
  6. 订单管理系统需求规范

    2024-07-20 15:06:01       42 阅读
  7. E15.【C语言】练习:逗号表达式和前置后置++

    2024-07-20 15:06:01       36 阅读
  8. VScode+latex+Sumatra 环境配置

    2024-07-20 15:06:01       43 阅读
  9. 宠物健康管理新突破:智能听诊器

    2024-07-20 15:06:01       36 阅读
  10. 学习计算机

    2024-07-20 15:06:01       38 阅读
  11. 前端出发能走多远——写在前面

    2024-07-20 15:06:01       39 阅读
  12. Linux 之 grep命令详解

    2024-07-20 15:06:01       35 阅读
  13. 小程序底层原理

    2024-07-20 15:06:01       37 阅读
  14. 力扣第十八题——四数之和

    2024-07-20 15:06:01       35 阅读
  15. python处理DWG文件

    2024-07-20 15:06:01       28 阅读