JavaScript长数字缩短显示的本地化方案及INTL API适配咨询

嘿，恭喜你已经搞定了基础的长数字缩写功能！关于本地化的问题，答案是完全支持，而且浏览器自带的Intl API就是专门干这个的，能帮你省不少手动适配的麻烦。

一、为什么要做本地化？ #

不同地区的用户对数字缩写的习惯差异很大：比如中文用户熟悉“万、亿”，而英文用户用“K、M、B”；欧洲部分语言还会用不同的单位缩写，甚至小数点和千分位的分隔符都不一样。本地化能让你的图表数字更贴合用户的阅读习惯，体验更友好。

二、Intl API的现成解决方案 #

Intl.NumberFormat其实提供了notation配置项，专门用于生成紧凑格式的数字缩写，它会自动根据你指定的本地化规则生成对应的单位和格式，完全不用自己维护K/M/B或者万/亿的映射表。

基础用法示例 #

直接上代码，看看不同语言下的效果：

// 英文（美国）本地化
const enUSFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  maximumFractionDigits: 1 // 控制保留1位小数
});
console.log(enUSFormatter.format(12345678)); // 输出 "12.3M"

// 中文（中国大陆）本地化
const zhCNFormatter = new Intl.NumberFormat('zh-CN', {
  notation: 'compact',
  maximumFractionDigits: 1
});
console.log(zhCNFormatter.format(12345678)); // 输出 "1234.6万"

// 德语（德国）本地化
const deDEFormatter = new Intl.NumberFormat('de-DE', {
  notation: 'compact',
  maximumFractionDigits: 1
});
console.log(deDEFormatter.format(12345678)); // 输出 "12,3 Mio."

这个API不仅会处理单位缩写，还会自动适配不同地区的数字格式细节（比如德语用逗号做小数点分隔符），非常省心。

三、自定义本地化规则（如果需要） #

如果Intl的默认紧凑格式不符合你的需求（比如你想强制全语言都用K/M/B，而不是地区专属单位），那可以结合Intl.NumberFormat的数字格式化能力，自己维护一套本地化单位表：

function formatLocalizedNumber(num, locale = 'en-US') {
  // 定义不同语言的单位映射
  const localeUnits = {
    'en-US': ['K', 'M', 'B', 'T'],
    'zh-CN': ['万', '亿', '兆'],
    'ja-JP': ['万', '億', '兆'],
    'fr-FR': ['k', 'M', 'Md', 'B']
  };

  const units = localeUnits[locale] || localeUnits['en-US'];
  const thresholds = units.map((_, index) => Math.pow(10, (index + 1) * 3));

  let displayNum = num;
  let unit = '';

  // 匹配对应的单位
  for (let i = thresholds.length - 1; i >= 0; i--) {
    if (num >= thresholds[i]) {
      displayNum = num / thresholds[i];
      unit = units[i];
      break;
    }
  }

  // 用Intl处理数字的本地化格式（小数、分隔符）
  return new Intl.NumberFormat(locale, {
    maximumFractionDigits: 1
  }).format(displayNum) + unit;
}

console.log(formatLocalizedNumber(12345678, 'zh-CN')); // 输出 "1234.6万"
console.log(formatLocalizedNumber(12345678, 'fr-FR')); // 输出 "12,3M"

这种方式既能自定义单位缩写，又能借助Intl处理数字的本地化细节，兼顾灵活性和规范性。

四、兼容性说明 #

Intl.NumberFormat的notation选项已经被绝大多数现代浏览器支持（Chrome 77+、Firefox 78+、Safari 14+）。如果需要兼容旧浏览器，可以引入@formatjs/intl-numberformat这样的polyfill来补全功能。

内容的提问来源于stack exchange，提问作者user2765977