JavaScript 中的 Intl.NumberFormat 与本地化数字格式化

描述
Intl.NumberFormat 是 JavaScript 国际化 API 的一部分，用于将数字格式化为符合特定地区（区域设置）规则的字符串，支持货币、百分比、单位等格式化，并自动处理千位分隔符、小数位数、货币符号等本地化细节。这在多语言或国际化 Web 应用中至关重要。

解题过程循序渐进讲解

步骤 1：基本用法与语法
Intl.NumberFormat 是一个构造函数，通过指定区域设置（locale）和选项（options）来创建一个格式化器实例，然后调用其 format() 方法格式化数字。

• 语法：new Intl.NumberFormat(locale, options)
• 参数：
  • locale：字符串或字符串数组，表示区域设置（例如 'en-US'、'de-DE'、'zh-CN'）。
  • options：可选对象，配置格式化的细节（如样式、货币类型、小数位数等）。
• 示例：

  const formatter = new Intl.NumberFormat('en-US');
  console.log(formatter.format(1234567.89)); // 输出: "1,234,567.89"
  

  这里，'en-US' 区域设置会自动添加千位分隔符（逗号）并保留两位小数。

步骤 2：理解区域设置（locale）的影响
区域设置决定了数字格式化的规则，包括：

• 千位分隔符：英语地区用逗号（,），德语地区用点（.），法语地区用空格（ ）。
• 小数分隔符：英语地区用点（.），德语地区用逗号（,）。
• 货币符号位置：美元符号 $ 在数字前，欧元符号 € 的位置因地区而异。

示例对比：

const num = 1234567.89;
console.log(new Intl.NumberFormat('en-US').format(num));  // "1,234,567.89"
console.log(new Intl.NumberFormat('de-DE').format(num));  // "1.234.567,89"
console.log(new Intl.NumberFormat('fr-FR').format(num));  // "1 234 567,89"（使用窄空格）

注意：德语中千位分隔符是点，小数分隔符是逗号；法语中千位分隔符是空格。

步骤 3：配置格式化样式（style）
通过 options.style 指定数字的显示类型，可选值：

• 'decimal'：默认值，普通数字格式。
• 'currency'：货币格式，需同时设置 options.currency。
• 'percent'：百分比格式（数字乘以 100 后加 % 符号）。
• 'unit'：单位格式，需设置 options.unit。

示例：

// 货币样式
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});
console.log(formatter.format(1234.56)); // "$1,234.56"

// 百分比样式
const percentFormatter = new Intl.NumberFormat('en-US', { style: 'percent' });
console.log(percentFormatter.format(0.456)); // "46%"（自动乘以 100 并加 %）

// 单位样式
const unitFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer-per-hour'
});
console.log(unitFormatter.format(100)); // "100 km/h"

步骤 4：精细控制格式细节
options 对象还支持以下常用属性：

• minimumFractionDigits 和 maximumFractionDigits：控制小数位数。
• useGrouping：是否使用千位分隔符（默认为 true）。
• currencyDisplay：货币符号显示方式（如 'symbol'、'code'、'name'）。

示例：

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
  currencyDisplay: 'symbol', // 默认，显示为 "€"
  useGrouping: true
});
console.log(formatter.format(1234567.891)); // "€1,234,567.89"（小数四舍五入到两位）

// 不使用千位分隔符
const noGrouping = new Intl.NumberFormat('en-US', { useGrouping: false });
console.log(noGrouping.format(1234567.89)); // "1234567.89"

步骤 5：处理单位格式化（unit）
单位格式化（style: 'unit'）支持国际单位制（如米、升、小时）或常用单位（如英里、加仑）。单位通过 unit 选项指定，使用 Unicode 单位标识符。

示例：

const units = ['meter', 'liter', 'kilometer-per-hour', 'mile-per-hour', 'degree-celsius'];
units.forEach(unit => {
  const formatter = new Intl.NumberFormat('en-US', { style: 'unit', unit });
  console.log(formatter.format(100)); // 输出: "100 m", "100 L", "100 km/h", "100 mph", "100°C"
});

注意：单位显示会根据区域设置调整（如德语中温度单位可能写为 "100 °C"）。

步骤 6：高级功能与扩展

1. 数字范围格式化：Intl.NumberFormat 实例的 formatRange() 方法可格式化一个数字范围（例如显示价格区间）。

   const formatter = new Intl.NumberFormat('en-US');
   console.log(formatter.formatRange(1000, 2000)); // "1,000–2,000"
   

2. 解析为部件（formatToParts）：formatToParts() 将格式化结果拆分为结构化数组，便于自定义渲染。

   const parts = new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: 'USD'
   }).formatToParts(1234.56);
   console.log(parts);
   // 输出: [
   //   { type: 'currency', value: '$' },
   //   { type: 'integer', value: '1' },
   //   { type: 'group', value: ',' },
   //   { type: 'integer', value: '234' },
   //   { type: 'decimal', value: '.' },
   //   { type: 'fraction', value: '56' }
   // ]
   

   这在需要自定义样式（如单独着色货币符号）时非常有用。

3. 地区匹配：当区域设置未明确指定时，可以使用 navigator.language 自动匹配用户首选语言。

   const userLocale = navigator.language || 'en-US';
   const formatter = new Intl.NumberFormat(userLocale);
   console.log(formatter.format(1234567.89));
   

步骤 7：注意事项与兼容性

• 兼容性：现代浏览器和 Node.js（≥ 0.12）均支持。对于旧环境（如 IE ≤ 10），需使用 polyfill（如 Intl.js）。
• 性能：创建 Intl.NumberFormat 实例开销较大，建议复用实例而非重复创建。
• 单位支持：某些单位可能在部分浏览器中不受支持，需测试目标环境。

总结
Intl.NumberFormat 提供了一套标准化的数字本地化方案，通过组合区域设置和选项，可灵活实现货币、百分比、单位等格式化。结合 formatToParts() 和 formatRange() 等高级方法，能满足复杂国际化场景的需求。