0

0

JavaScript中的国际化(i18n)如何实现?

幻影之瞳

幻影之瞳

发布时间:2025-10-03 22:04:02

|

786人浏览过

|

来源于php中文网

原创

javascript中的国际化通过intl api实现,支持日期、时间、数字、货币等本地化格式化,并结合i18next等库处理多语言翻译,利用navigator.language检测用户偏好,动态切换语言并管理复数和占位符,满足多语言应用需求。

javascript中的国际化(i18n)如何实现?

JavaScript中的国际化(i18n)主要通过内置的 Intl API 来实现,它提供了对日期、时间、数字、货币、排序和消息格式化的本地化支持。结合第三方库或自定义逻辑,可以构建完整的多语言应用。

使用 Intl API 进行基础格式化

现代浏览器和Node.js环境都支持 Intl 对象,无需引入外部依赖即可处理常见本地化需求。

• 格式化日期和时间:

new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: 'long', day: '2-digit' }).format(new Date()) 输出如“2025年4月5日”

• 格式化数字和货币:

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.5) 输出 “1.234,50 €”

立即学习Java免费学习笔记(深入)”;

• 字符串排序(排序规则):

['ä', 'z', 'a'].sort(new Intl.Collator('de').compare) 按德语规则排序

实现多语言文本翻译

Intl 本身不提供翻译功能,需配合资源文件或库来管理不同语言的文本内容。

• 使用 key-based 翻译方案:

维护 JSON 文件存储每种语言的键值对,例如 en.json 和 zh.json,根据用户语言加载对应资源。

网奇英文商城外贸系统
网奇英文商城外贸系统

网奇Eshop是一个带有国际化语言支持的系统,可以同时在一个页面上显示全球任何一种语言而没有任何障碍、任何乱码。在本系统中您可以发现,后台可以用任意一种语言对前台进行管理、录入而没有阻碍。而任何一个国家的浏览者也可以用他们的本国语言在你的网站上下订单、留言。用户可以通过后台随意设定软件语言,也就是说你可以用本软件开设简体中文、繁体中文与英文或者其他语言的网上商店。网奇Eshop系统全部版本都使用模

下载
• 推荐使用 i18next 或 formatjs:

i18next 是流行的国际化框架,支持插件加载、复数、上下文等复杂场景;@formatjs/intl 基于 Intl.MessageFormat 扩展,适合与 React 集成。

动态设置语言环境

获取用户偏好语言可通过 navigator.language 或服务器传递的 Accept-Language 头部。

• 检测并切换语言:
  • 读取当前语言:const lang = navigator.language || 'en'
  • 监听语言变化(部分浏览器支持):window.addEventListener('languagechange', ...)
  • 允许用户手动选择语言,并将选择保存到 localStorage

切换时重新加载对应语言包并刷新界面文本。

处理复数和占位符

不同语言的复数规则差异大,应使用标准库处理。

例如 i18next 支持:

{{count}} item{{count === 1 ? '' : 's'}} 可替换为支持多复数形式的语法:

{
  "item": "{{count}} 个项目",
  "item_plural": "{{count}} 个项目"
}

在中文中单复数一致,但在英语或阿拉伯语中需区分。

基本上就这些。利用好 Intl API 和成熟库,能有效支撑大多数国际化需求。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

443

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

544

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

322

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

81

2025.09.10

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

199

2023.11.20

sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

404

2023.09.04

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

866

2023.07.31

python中的format是什么意思
python中的format是什么意思

python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

452

2024.06.27

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

928

2026.02.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.3万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号