JavaScript中的国际化与Intl对象

描述
国际化（Internationalization，简称 i18n）是指让代码适应不同语言、地区或文化需求的过程。JavaScript 通过内置的 Intl 对象提供国际化支持，包括日期/时间格式化、数字格式化、货币显示、比较字符串（排序）等功能。掌握 Intl 对象是前端开发中处理多语言场景的核心技能。

1. Intl对象简介
Intl 是 JavaScript 的全局对象，无需实例化即可直接使用其构造函数（如 Intl.DateTimeFormat）。它基于 Unicode 和 CLDR（Common Locale Data Repository）标准，确保数据与行业规范一致。

核心功能分类：

• 日期/时间格式化（Intl.DateTimeFormat）
• 数字/货币格式化（Intl.NumberFormat）
• 字符串比较（Intl.Collator）
• 列表格式化（Intl.ListFormat，ES2021 新增）
• 相对时间格式化（Intl.RelativeTimeFormat，ES2020 新增）

2. 日期时间格式化（Intl.DateTimeFormat）
场景：将日期转换为不同语言或格式的字符串。

步骤：

1. 创建格式化实例：通过 new Intl.DateTimeFormat(locales, options) 指定语言和选项。

   • locales：字符串或数组（如 "en-US"、["zh-CN", "en"]），表示优先使用的语言。
   • options：配置对象，定义日期显示的细节（如年、月、日的格式）。

2. 格式化日期：调用实例的 format(date) 方法。

示例：

// 基础用法：美式英语格式  
const date = new Date("2023-12-25");  
const formatter = new Intl.DateTimeFormat("en-US");  
console.log(formatter.format(date)); // "12/25/2023"  

// 中文格式  
const zhFormatter = new Intl.DateTimeFormat("zh-CN");  
console.log(zhFormatter.format(date)); // "2023/12/25"  

// 自定义选项：显示完整月份和星期  
const options = {  
  weekday: "long",  
  year: "numeric",  
  month: "long",  
  day: "numeric"  
};  
const detailedFormatter = new Intl.DateTimeFormat("en-US", options);  
console.log(detailedFormatter.format(date)); // "Monday, December 25, 2023"  

关键选项：

• dateStyle/timeStyle：预设格式（如 "full"、"short"）。
• timeZone：指定时区（如 "UTC"）。

3. 数字与货币格式化（Intl.NumberFormat）
场景：格式化数字为货币、百分比或本地化数字分隔符。

步骤：

1. 创建实例：new Intl.NumberFormat(locales, options)。
2. 配置选项：
   • style：支持 "decimal"（默认）、"currency"、"percent"。
   • currency：货币类型（如 "USD"、"EUR"），需与 style: "currency" 配合。
   • minimumFractionDigits：最小小数位数。

示例：

const number = 1234567.89;  

// 本地化数字分隔符  
const deFormatter = new Intl.NumberFormat("de-DE");  
console.log(deFormatter.format(number)); // "1.234.567,89"（德国格式）  

// 货币格式化  
const currencyFormatter = new Intl.NumberFormat("en-US", {  
  style: "currency",  
  currency: "USD"  
});  
console.log(currencyFormatter.format(number)); // "$1,234,567.89"  

// 百分比  
const percentFormatter = new Intl.NumberFormat("en-US", {  
  style: "percent",  
  minimumFractionDigits: 2  
});  
console.log(percentFormatter.format(0.456)); // "45.60%"  

4. 字符串比较与排序（Intl.Collator）
场景：处理不同语言的字母排序（如德语变音符号、中文拼音）。

步骤：

1. 创建比较器：new Intl.Collator(locales, options)。
2. 使用比较函数：调用实例的 compare(a, b) 方法，返回值符合 sort() 要求。

示例：

const words = ["äpple", "apple", "banana"];  

// 默认排序（按 Unicode 码点）  
console.log(words.sort()); // ["apple", "banana", "äpple"]（不符合德语习惯）  

// 德语排序：ä 与 a 同级  
const deCollator = new Intl.Collator("de");  
console.log(words.sort(deCollator.compare)); // ["apple", "äpple", "banana"]  

// 中文拼音排序  
const zhWords = ["北京", "上海", "广州"];  
const zhCollator = new Intl.Collator("zh-CN");  
console.log(zhWords.sort(zhCollator.compare)); // ["北京", "广州", "上海"]  

常用选项：

• sensitivity: "base"：忽略大小写和变音符号（如 "a" 与 "ä" 视为相同）。

5. 高级功能：相对时间与列表格式化
Intl.RelativeTimeFormat：

const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });  
console.log(rtf.format(-1, "day")); // "yesterday"  
console.log(rtf.format(2, "hour")); // "in 2 hours"  

Intl.ListFormat（ES2021）：

const listFormatter = new Intl.ListFormat("en", {  
  style: "long",  
  type: "conjunction"  
});  
console.log(listFormatter.format(["Alice", "Bob", "Charlie"]));  
// "Alice, Bob, and Charlie"  

6. 实战技巧

• 动态检测语言：使用 navigator.language 或 Accept-Language 请求头。
• 性能优化：复用 Intl 实例避免重复创建。
• 兼容性：现代浏览器全面支持，老旧项目需 Polyfill（如 formatjs 库）。

总结
Intl 对象将复杂的国际化逻辑封装为简单 API，通过灵活配置即可适配全球用户。重点掌握日期、数字、排序的格式化方法，并理解 locales 和 options 参数的作用。