如何通过 Intl.NumberFormat 的 compactDisplay 属性实现类似“1.2万”的数值缩写

Intl.NumberFormat 的 compactDisplay 属性可自动将大数字转为“万”“亿”等中文缩写，需设置 notation: 'compact'、compactDisplay: 'short' 和 locale: 'zh-CN'；支持通过 maximumFractionDigits 控制小数位数，short 模式优于 long 模式，兼容性良好但需 fallback。

Intl.NumberFormat 的 compactDisplay 属性可以自动将大数字转为“万”“亿”“百万”等简洁形式，无需手动除法或字符串拼接。

启用 compactDisplay 并选择中文单位

设置 notation: 'compact' 和 compactDisplay: 'short'，再指定 locale: 'zh-CN'，就能获得“万”“亿”等本地化缩写：

const formatter = new Intl.NumberFormat('zh-CN', {
  notation: 'compact',
  compactDisplay: 'short'
});

formatter.format(12000); // → "1.2万"
formatter.format(15000000); // → "1,500万"
formatter.format(1234567890); // → "12亿"

控制小数位数和舍入行为

默认会保留 1 位有效数字（如 9999 → "1万"），可通过 maximumFractionDigits 调整精度：

const precise = new Intl.NumberFormat('zh-CN', {
  notation: 'compact',
  compactDisplay: 'short',
  maximumFractionDigits: 2
});

precise.format(12345); // → "1.23万"
precise.format(9999); // → "1万"（仍按有效数字规则舍入）

• 使用 minimumFractionDigits 可强制补零，例如显示“1.00万”
• 注意：这是对“缩写后数值”的小数位控制，不是原始数字的保留位数

区分 short 和 long 模式

compactDisplay: 'short' 用“万”“亿”，而 'long' 会用完整词如“一万”“一亿”，但目前 中文 locale 对 'long' 支持有限，多数情况返回空或回退到 short：

new Intl.NumberFormat('zh-CN', {
  notation: 'compact',
  compactDisplay: 'long'
}).format(10000); // 多数浏览器仍返回 "1万"，非 "一万"

• 英文 locale（如 'en-US'）对两种模式支持更完整：“1K” vs “1 thousand”
• 中文场景建议坚持用 'short'，并以实际输出为准

注意兼容性与 fallback 方案

该特性在现代浏览器中已广泛支持（Chrome 71+、Firefox 73+、Safari 15.4+），但旧版 Safari 或某些 WebView 可能不识别 compactDisplay：

• 可先检测是否生效：formatter.format(10000).includes('万')
• 若失败，可降级为手动映射：对数字除以 10⁴/10⁸，再拼接单位
• 避免依赖未标准化的单位名称，例如不要假设一定出现“兆”（中文里“兆”含义模糊，Intl 通常跳过）