Intl.NumberFormat compactDisplay 实现数值缩写如1.2万

在日常开发中，数字展示常常需要转为“1.2万”“3.5亿”等简洁形式，避免用户因数字过长而阅读困难。过去需要手动进行除法运算和字符串拼接，如今借助 Intl.NumberFormat 的 compactDisplay 属性，只需设置几个参数，即可按中文习惯自动缩写为“万”“亿”，无需手动计算。

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万"（仍按有效数字规则舍入）

• 如需强制补零（如显示“1.00万”），可使用 minimumFractionDigits 指定最小小数位数。
• 注意：该参数控制的是缩写后数值的小数位，而非原始数字的保留位数。

区分 short 和 long 模式

compactDisplay: 'short' 直接使用“万”“亿”，而 'long' 在理论上应使用完整词“一万”“一亿”。但实际测试中，中文 locale 对 'long' 的支持有限，大多浏览器会回退至 short 模式：

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

• 英文 locale（如 'en-US'）对两种模式支持更完整，可区分“1K”和“1 thousand”。
• 中文场景下建议坚持使用 'short'，并依据实际输出进行测试。

注意兼容性与 fallback 方案

该特性已在现代浏览器中广泛支持（Chrome 71+、Firefox 73+、Safari 15.4+），但旧版 Safari 或某些 WebView 可能无法识别 compactDisplay。建议准备降级方案：

• 先检测是否生效：例如 formatter.format(10000).includes('万')，若结果为 false，则需降级。
• 降级时，可回退至手动映射：对数字除以 10/10，再拼接单位。
• 尽量避免依赖“兆”等含义模糊的单位——中文中“兆”可指百万或万亿，Intl 通常直接跳过，不返回结果。