前端如何支持i18n?

news2024/9/20 15:40:01

何为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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1937660.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言两数相除(要求只能使用加法和减法)求商和余数

思路分析:举个例子如 8/3 2余2 8-35 5-32 减了2次 最后一次结果为2 9/33 9-36 6-33 3-30 减了3次 最后一次为0 10/33余1 10-37 7-34 4-31 减了3次 最后一次为1 所以可以得出规律为…

huawei USG6001v1学习---防火墙相关知识(2)

目录 1.安全策略 2.防火墙的状态检测和会话表技术 3.FTP 4.用户认证 5.认证策略 1.安全策略 传统包过滤技术 --- 其本质就是ACL访问控制列表,根据数据包的特征进行过滤,对比规则, 执行对应的动作; 这里数据包的特征 --- …

Nest.js 实战 (二):如何使用 Prisma 和连接 PostgreSQL 数据库

什么是 Prisma? Prisma 是一个开源的下一代 ORM。它包含了以下部分: Prisma Client: 自动生成、类型安全的查询构建器,用于 Node.js 和 TypeScriptPrisma Migrate: 数据迁移系统Prisma Studio: 查询和编辑数据库中数据的图形化界面 Prisma 客户端可以…

Java面试(持续更新)

Redis使用场景 缓存穿透 当有该数据的时候,redis中的数据已经是原来数据的null值了,可能会出现不一致的问题。 缓存击穿 跟钱相关的强一致用互斥锁。 用户高体验用逻辑过期。 缓存雪崩 ttl随机值 mysql于redis保持数据同步 Redis持久化问题 RDB AOF R…

复习知识点java

目录 1.题目分析:2.思考题3.题目:4.题目:求X的反码和补码计算反码计算补码 计算2乘以8的结果实现两个整数变量的交换异或运算符(^)的特点 1.题目 byte b13,b24,b; bb1b2; b34; 哪句是编译失败的呢?为什么呢…

【人工智能】机器学习 -- 决策树(乳腺肿瘤数)

目录 一、使用Python开发工具,运行对iris数据进行分类的例子程序dtree.py,熟悉sklearn机器实习开源库。 二、登录https://archive-beta.ics.uci.edu/ 三、使用sklearn机器学习开源库,使用决策树对breast-cancer-wisconsin.data进行分类。 …

系统架构师考点--统一建模语言UML

大家好。今天我来总结一下面向对象的第二个考点–统一建模语言UML。 UML(统一建模语言)是一种可视化的建模语言,而非程序设计语言,支持从需求分析开始的软件开发的全过程。UML的结构包括构造块、规则和公共机制三个部分。其中考点主要集中在构造块部分&…

【深度学习入门篇 ⑩】Seq2Seq模型:语言翻译

【🍊易编橙:一个帮助编程小伙伴少走弯路的终身成长社群🍊】 大家好,我是小森( ﹡ˆoˆ﹡ ) ! 易编橙终身成长社群创始团队嘉宾,橙似锦计划领衔成员、阿里云专家博主、腾讯云内容共创官…

前端Vue组件技术实践:构建自定义动态宫格菜单按钮组件

随着前端技术的不断发展,复杂度和开发难度也随之增加。传统的整体式开发方式已经难以满足现代前端应用的需求,特别是在业务场景复杂、产品迭代频繁的情况下。组件化开发作为一种有效的解决方案,通过拆分和组合独立的组件,实现了单…

C语言 | Leetcode C语言题解之第240题搜索二维矩阵II

题目&#xff1a; 题解&#xff1a; bool searchMatrix(int** matrix, int matrixSize, int* matrixColSize, int target){int i 0;int j matrixColSize[0] - 1;while(j > 0 && i < matrixSize){if(target < matrix[i][j])j--;else if(target > matrix[…

监测电商热品推荐的技术心得

在当今数字化时代&#xff0c;电商行业竞争激烈&#xff0c;准确监测热门商品推荐对于电商企业的运营和决策至关重要。通过不断的实践和探索&#xff0c;我积累了以下一些关于监测电商热品推荐的技术心得。 一、数据采集与整合 多平台数据抓取 要全面了解电商市场的热门商品&am…

ORBSLAM3 ORB_SLAM3 Ubuntu18.04 ROS Melodic 虚拟镜像 下载

build.sh 和 build_ros.sh编译结果截图&#xff1a; slam测试视频&#xff1a; orbslam3 ubuntu18.04 test 下载地址&#xff08;付费使用&#xff0c;不能接受请勿下载&#xff09;&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/13YeJS4RGa3fBrG8BKfPbBw?pwds6vg 提…

使用phpMyAdmin操作MYSQL(四)

一. 学会phpMyAdmin&#xff1f; phpMyAdminhttp://water.ve-techsz.cn/phpmyadmin/ 虽然我我们可以用命令行操作数据库&#xff0c;但这样难免没有那么直观&#xff0c;方便。所以接下来我们使用phpMyAdmin来操作MySQL&#xff0c;phpMyAdmin是众多MySQL图形化管理工具中使用…

​人人开源renren-security:基于SpringBoot、Vue3、ElementPlus等框架开发的权限管理系统

摘要&#xff1a; 随着信息技术的快速发展&#xff0c;企业的信息系统安全需求日益凸显。renren-security是一套基于SpringBoot、MyBatis-Plus、Shiro、Vue3、ElementPlus等框架开发的权限管理系统&#xff0c;它旨在为企业提供高效、安全、易用的权限管理解决方案。本文详细阐…

用Wireshark观察IPsec协议的通信过程

目录 一、配置本地安全策略 二、启动Wireshark&#xff0c;设置过滤器&#xff0c;开始捕获 1. 主模式 2. Quick mode 三、心得体会 1. 碰到的问题和解决办法 2. 心得 一、配置本地安全策略 配置好IPsec如下&#xff1a; 由于在windows server2008安装wireshark失败&…

Qt实现一个简单的视频播放器

目录 1 工程配置 1.1 创建新工程 1.2 ui界面配置 1.3 .pro配置 2 代码 2.1 main.c代码 2.2 widget.c 2.3 widget.h 本文主要记述了如何使用Qt编写一个简单的视频播放器&#xff0c;整个示例采用Qt自带组件就可以完成。可以实现视频的播放和暂停等功能。 1 工程配置 1.…

2024.7.19最新详细的VMware17.0.0安装

VM官网VMware - Delivering a Digital Foundation For Businesses。现在官网无法下载&#xff0c;点击会跳转到https://access.broadcom.com/default/ui/v1/signin/ 要注册一个账号&#xff1a; 注册登录以后&#xff0c;点击Please select your identity provider. - Support …

深度学习落地实战:大模型生成图片

前言 大家好&#xff0c;我是机长 本专栏将持续收集整理市场上深度学习的相关项目&#xff0c;旨在为准备从事深度学习工作或相关科研活动的伙伴&#xff0c;储备、提升更多的实际开发经验&#xff0c;每个项目实例都可作为实际开发项目写入简历&#xff0c;且都附带完整的代…

基于RFID的课堂签到系统设计

1.简介 基于RFID的课堂签到系统设计是一种利用无线射频识别&#xff08;RFID&#xff09;技术实现课堂自动签到的系统。这种系统通过RFID标签&#xff08;通常是学生携带的卡片或手环等&#xff09;与安装在教室内的RFID读写器之间的无线电信号进行数据交换&#xff0c;从而实现…

深度学习入门——与学习相关的技巧

前言 本章将介绍神经网络的学习中的一些重要观点&#xff0c;主题涉及寻找最优权重参数的最优化方法、权重参数的初始值、超参数的设定方法等 此外&#xff0c;为了应对过拟合&#xff0c;本章还将介绍权值衰减、Dropout等正则化方法&#xff0c;并进行实现。 最后将对近年来…