JavaScript Intl.NumberFormat实现千分位格式化的国际化方案

Intl.NumberFormat 是 JavaScript 内置的国际化对象，用于处理数字格式化。相比于手动拼接字符串或使用正则替换，它能更高效、更精准地处理货币、百分比、计量单位以及不同语言的千分位显示规则。

基础数字千分位格式化

1. 打开 JavaScript 控制台或代码文件。
2. 创建一个 Intl.NumberFormat 实例，将语言代码传入构造函数。例如，zh-CN 代表简体中文（使用逗号分隔千分位），en-US 代表美式英语。
3. 调用实例的 format 方法，并传入需要格式化的数字。

// 创建中文格式化器
const cnFormatter = new Intl.NumberFormat('zh-CN');

// 格式化数字
console.log(cnFormatter.format(1234567.89));
// 输出: '1,234,567.89'

// 创建德语格式化器（德国习惯使用点号作为千分位，逗号作为小数点）
const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(1234567.89));
// 输出: '1.234.567,89'

货币格式化

货币格式化不仅处理千分位，还会自动添加货币符号并处理小数位精度。

1. 配置 style 属性为 currency。
2. 指定 currency 属性为标准的 ISO 4217 货币代码（如 CNY、USD、EUR）。

const cnyFormatter = new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY'
});

console.log(cnyFormatter.format(1234.5));
// 输出: '¥1,234.50'

常用配置参数详解

通过配置对象，可以精细控制格式化的输出结果。

禁用千分位分组

如果某些场景下只需要格式化小数位而不需要千分位逗号，可以将 useGrouping 设置为 false。

const noGroupFormatter = new Intl.NumberFormat('zh-CN', {
    useGrouping: false
});

console.log(noGroupFormatter.format(1234567.89));
// 输出: '1234567.89'

百分比格式化

1. 设置 style 为 percent。
2. 注意：输入的数字应使用小数形式（例如 0.5 代表 50%）。

const percentFormatter = new Intl.NumberFormat('zh-CN', {
    style: 'percent',
    minimumFractionDigits: 2 // 强制保留两位小数
});

console.log(percentFormatter.format(0.1234));
// 输出: '12.34%'

单位格式化

Intl.NumberFormat 支持将数字与计量单位结合，如长度、速度、质量等。

1. 设置 style 为 unit。
2. 指定 unit 为合法的单位标识符。

const speedFormatter = new Intl.NumberFormat('zh-CN', {
    style: 'unit',
    unit: 'kilometer-per-hour',
    unitDisplay: 'long' // 可选值: 'long', 'short', 'narrow'
});

console.log(speedFormatter.format(100));
// 输出: '100 公里/小时'

性能优化：复用实例

Intl.NumberFormat 的实例化过程相对昂贵。在循环或高频调用的场景中，必须避免重复创建实例。

1. 声明格式化器在循环或函数外部。
2. 复用该实例处理所有数据。

// 错误示范：在循环中重复创建，性能低下
// for (let i = 0; i < 10000; i++) {
//     const formatter = new Intl.NumberFormat('zh-CN');
//     formatter.format(i);
// }

// 正确示范：在外部创建，循环内复用
const optimizedFormatter = new Intl.NumberFormat('zh-CN');

for (let i = 0; i < 10000; i++) {
    optimizedFormatter.format(i);
}

兼容性处理

所有现代浏览器和 Node.js (v0.12+) 均支持 Intl.NumberFormat。对于极少数需要支持 IE11 或旧版环境的场景：

1. 检查 window.Intl 是否存在。
2. 引入 intl Polyfill 库（如 formatjs）来填补功能缺失。

if (window.Intl) {
    // 环境支持，直接使用
    const formatter = new Intl.NumberFormat('zh-CN');
} else {
    // 环境不支持，加载 Polyfill 或回退到简单逻辑
    console.warn('当前环境不支持 Intl API');
}