0

0

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

夜晨

夜晨

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

|

422人浏览过

|

来源于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 中的 yearmonthday 值为 '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.89en-US"1,234,567.89",在 de-DE"1.234.567,89",在 ar-EG"١٬٢٣٤٬٥٦٧٫٨٩"(阿拉伯数字字符 + 本地分隔符)。货币更复杂:符号位置、是否空格、是否使用本地货币名称(如 JPY 显示为 "¥1,234" 而非 "1,234 ¥")全由 locale 决定。

标书对比王
标书对比王

标书对比王是一款标书查重工具,支持多份投标文件两两相互比对,重复内容高亮标记,可快速定位重复内容原文所在位置,并可导出比对报告。

下载
  • 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工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

846

2023.08.22

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

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

409

2023.09.04

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

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

324

2024.02.29

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

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

738

2023.08.03

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

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

219

2023.09.04

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

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

1561

2023.10.24

字符串介绍
字符串介绍

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

649

2023.11.24

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

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

1188

2024.03.22

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

23

2026.03.06

热门下载

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

精品课程

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

共58课时 | 5.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

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

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