JavaScript国际化(Intl)全解析 - 处理多语言字符串、日期和数字

叶展冰Guy

于 2025-06-10 09:18:17 发布

阅读量275

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00912/article/details/148552350

JavaScript国际化(Intl)全解析 - 处理多语言字符串、日期和数字

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

引言

在现代Web开发中，应用程序经常需要面向全球用户。不同地区的用户习惯不同的日期格式、数字表示方式和字符串排序规则。JavaScript通过Intl API提供了一套完整的国际化解决方案，让开发者能够轻松处理这些差异。

什么是国际化(Intl)？

国际化(Internationalization，简称i18n)是指使软件能够适应不同语言和地区需求的过程。JavaScript中的Intl对象提供了一系列构造函数和方法来处理：

字符串比较和排序
日期时间格式化
数字和货币格式化

核心Intl对象

1. Intl.Collator - 字符串比较

传统JavaScript字符串比较基于Unicode码点，这会导致不符合语言习惯的排序结果。例如在俄语中：

"ёжик" > "яблоко" // true (不符合俄语字母顺序)

使用Intl.Collator可以解决这个问题：

const collator = new Intl.Collator('ru');
console.log(collator.compare("ёжик", "яблоко")); // -1 (正确顺序)

常用选项：

sensitivity: 控制比较敏感度
- base: 忽略大小写和变音符号
- accent: 考虑变音符号
- case: 考虑大小写
- variant: 考虑所有差异(默认)
numeric: 是否按数字值比较("10" > "2")
ignorePunctuation: 是否忽略标点符号

2. Intl.DateTimeFormat - 日期格式化

不同地区的日期表示差异很大：

俄罗斯: 31.12.2014
美国: 12/31/2014
日本: 2014/12/31

使用示例：

const date = new Date(2014, 11, 31);
const ruFormatter = new Intl.DateTimeFormat('ru');
console.log(ruFormatter.format(date)); // "31.12.2014"

const usFormatter = new Intl.DateTimeFormat('en-US');
console.log(usFormatter.format(date)); // "12/31/2014"

格式化选项：

year: "numeric" | "2-digit"
month: "numeric" | "2-digit" | "long" | "short" | "narrow"
day: "numeric" | "2-digit"
hour, minute, second: "numeric" | "2-digit"
timeZone: 指定时区(如"Europe/Moscow")

3. Intl.NumberFormat - 数字格式化

处理数字的国际差异：

千位分隔符: 1,234 vs 1 234
小数分隔符: 1.23 vs 1,23
货币符号位置: $100 vs 100$

使用示例：

const number = 1234567.89;

const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(number)); // "1.234.567,89"

const jpFormatter = new Intl.NumberFormat('ja-JP');
console.log(jpFormatter.format(number)); // "1,234,567.89"

货币格式化：

const moneyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR'
});
console.log(moneyFormatter.format(100)); // "€100.00"

理解Locale(区域设置)

Locale是国际化的核心概念，通常由以下部分组成：

语言代码(必需): 如"zh"(中文)、"en"(英文)
脚本代码(可选): 如"Hans"(简体中文)
国家代码(可选): 如"CN"(中国)

示例：

"zh-Hans-CN": 简体中文
"zh-Hant-TW": 繁体中文
"en-US": 美国英语

实用技巧

自动检测用户区域：

const userLocale = navigator.language || navigator.userLanguage;

简化的原型方法：

// 等同于使用Intl.DateTimeFormat
new Date().toLocaleString('ru');

// 等同于使用Intl.NumberFormat
(12345.67).toLocaleString('de');

性能优化：对于需要多次格式化的场景，创建并重用格式化对象：

// 好的做法
const formatter = new Intl.NumberFormat('en-US');
for (let i = 0; i < 1000; i++) {
  formatter.format(i);
}

// 不好的做法(每次循环都创建新对象)
for (let i = 0; i < 1000; i++) {
  new Intl.NumberFormat('en-US').format(i);
}