讲师中心 微信公众号
AI工具推荐 视频效率加速

什么是JavaScript中的国际化与本地化_使用Intl对象处理多语言支持【教程】

落晨酱_1306

落晨酱_1306

发布时间:2026-01-16 16:32:02

|

502人浏览过

|

来源于php中文网

原创

JavaScript国际化靠Intl对象统一处理本地化细节,而非手动条件判断;Intl.DateTimeFormat、NumberFormat、Collator分别管控日期格式、数字货币格式、多语言排序,需正确使用BCP 47 locale和options,并注意兼容性与性能优化。

什么是javascript中的国际化与本地化_使用intl对象处理多语言支持【教程】

JavaScript 中的国际化(i18n)不是靠手动写 if (lang === 'zh') {...} 实现的,而是用浏览器原生的 Intl 对象统一处理——它不解决翻译文案本身,但决定了“数字怎么分组”“日期怎么排”“货币符号放哪”这些本地化细节。

Intl.DateTimeFormat 处理日期/时间格式时要注意 locale 和 options 的组合效果

同一个 new Date() 在不同地区显示差异极大:'2024-03-15' 在 en-US 是 "3/15/2024",在 zh-CN 是 "2024年3月15日",在 ja-JP 是 "2024年3月15日"(但排序逻辑隐含在 calendar 系统里)。关键不在“翻译”,而在“约定”。

  • locale 必须是标准 BCP 47 标签,如 'de-DE'、'pt-BR';'de' 或 'BR' 可能降级为默认行为,不可靠
  • options 中的 year、month、day 值为 'numeric' 或 '2-digit' 会影响是否补零,'long' 会触发本地化名称(如 month: 'long' → 'März')
  • 不要依赖 toString() 或 Date.prototype.toLocaleString(),它们受用户系统设置干扰,Intl.DateTimeFormat 才可控
const formatter = new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit'
});
console.log(formatter.format(new Date())); // "2024-03-15 14:22"

Intl.NumberFormat 对千分位、小数位、货币符号位置有严格 locale 依赖

数字格式不是“加个逗号”那么简单。1234567.89 在 en-US 是 "1,234,567.89",在 de-DE 是 "1.234.567,89",在 ar-EG 是 "١٬٢٣٤٬٥٦٧٫٨٩"(阿拉伯数字字符 + 本地分隔符)。货币更复杂:符号位置、是否空格、是否使用本地货币名称(如 JPY 显示为 "¥1,234" 而非 "1,234 ¥")全由 locale 决定。

YiHui GIT MONITOR
YiHui GIT MONITOR

通用Git项目监控工具,支持GitHub、GitLab、Gitee等所有平台,自动检测、添加/删除仓库更新并生成变更摘要。

下载
  • style: 'currency' 必须配合 currency(如 'USD'),否则报错
  • currencyDisplay 可选 'symbol'、'code'、'name',后者在 en-US 显示 "US dollar",在 fr-FR 显示 "dollar américain"
  • 避免用 toFixed() 配合字符串拼接做货币格式——它不处理 locale 分隔符,也不支持负数本地化括号(如 de-DE 的 "(1.234,56)")
const moneyFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});
console.log(moneyFormatter.format(-1234.56)); // "-1.234,56 €"

Intl.Collator 解决中文、日文、阿拉伯文等排序乱序问题

直接用 Array.prototype.sort() 对中文数组排序会得到乱序结果,因为默认按 UTF-16 码点排,'张'(U+5F20)比 '李'(U+674E)靠后,但拼音顺序是 “李” 在 “张” 前。同样,日文假名、阿拉伯文字母表顺序也完全失效。

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

  • new Intl.Collator('zh-Hans') 启用中文拼音排序;'ja' 启用五十音图顺序;'ar' 启用阿拉伯字母表顺序
  • sensitivity 设为 'base' 可忽略大小写和重音(适合搜索场景);设为 'variant' 则区分大小写和变音符号(适合精确匹配)
  • 不能只靠 localeCompare() 方法,它内部调用 Intl.Collator,但每次调用都新建实例,性能差;应复用 Collator 实例
const collator = new Intl.Collator('zh-Hans', { sensitivity: 'base' });
['张三', '李四', '王五'].sort(collator.compare); // ['李四', '王五', '张三']

真正难的不是调用 Intl API,而是把 locale 从 URL、HTTP header 或用户偏好中稳定获取,并在服务端渲染(SSR)或静态生成(SSG)时提前注入正确 locale;另外,Intl 在旧版 Safari 或某些安卓 WebView 中可能缺失部分功能,需检查 typeof Intl !== 'undefined' 并提供降级策略。

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
sort排序函数用法
sort排序函数用法

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

1138

2023.09.04

java中calendar类的用法
java中calendar类的用法

Java Video类是JavaFX库中的一个类,用于创建和操作视频对象。它提供了方法来加载、播放、暂停、停止和控制视频的音量、速度和循环等属性。想了解更多Java中类的相关内容,可以阅读本专题下面的文章。

1955

2024.02.29

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1738

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2704

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

6084

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

5709

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

7354

2024.03.22

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

10754

2024.04.29

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

100

2026.10.16

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn