如何控制是否显示千位分隔符？

介绍

当您格式化数字 123456 时，可能会看到 "123,456"，其中逗号用来分隔千位，或者 "123456"，没有任何分隔符。分隔数字组的字符被称为分组分隔符，在英语地区通常称为千位分隔符。

不同的场景需要不同的格式。财务报告通常显示分组分隔符，以便于阅读大数字。而技术显示如序列号、产品代码和 ID 号通常省略分隔符，以避免混淆。在 Intl.NumberFormat 中，useGrouping 选项控制这些分隔符是否出现在格式化输出中。

本指南将解释如何启用和禁用分组分隔符，它们在不同语言环境中的变化，以及在应用程序中何时使用每种设置。

使用 useGrouping false 禁用分组分隔符

将 useGrouping 设置为 false，可以从格式化数字中移除所有分组分隔符。

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: false
});

formatter.format(123456);
// "123456"

formatter.format(1234567.89);
// "1234567.89"

格式化输出中不包含逗号或其他分组字符，无论数字有多大。小数分隔符仍然保留，因为 useGrouping 仅影响数字分组，而不影响小数格式。

这适用于所有数字样式，包括货币和单位。

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: false
}).format(1234567.89);
// "$1234567.89"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: false
}).format(50000);
// "50000 km"

货币符号和单位标签正常显示，但数字内部没有分隔符。

使用 useGrouping true 启用分组分隔符

将 useGrouping 设置为 true，可以包含分组分隔符。这是默认行为，因此只有在您想明确表达意图或覆盖配置时才需要显式指定。

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: true
});

formatter.format(123456);
// "123,456"

formatter.format(1234567.89);
// "1,234,567.89"

格式化器每三位插入一个逗号，遵循英语的习惯。这使得大数字更容易快速浏览。

由于 true 是默认值，这两个格式化器是等效的。

new Intl.NumberFormat('en-US', { useGrouping: true });
new Intl.NumberFormat('en-US');

两个格式化器的输出都包含分组分隔符。

了解不同语言环境中的分组差异

不同的语言环境使用不同的字符进行分组，并遵循不同的分组模式。useGrouping 选项控制是否进行分组，而语言环境决定了使用什么字符以及字符出现的位置。

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(1234567);
// "1,234,567"

new Intl.NumberFormat('de-DE', {
  useGrouping: true
}).format(1234567);
// "1.234.567"

new Intl.NumberFormat('fr-FR', {
  useGrouping: true
}).format(1234567);
// "1 234 567"

英语使用逗号，德语使用句号，法语使用空格。虽然它们看起来不同，但它们都是分组分隔符，因为它们遵循各自语言环境的约定。

某些语言环境使用不同的分组模式。例如，印度的数字分组方式是先分组前三位，然后每两位分组一次。

new Intl.NumberFormat('en-IN', {
  useGrouping: true
}).format(1234567);
// "12,34,567"

分组分隔符从右边开始，先在三位数字后出现，然后每两位数字后出现，生成 12,34,567 而不是 1,234,567。

当使用 useGrouping: false 禁用分组时，这些特定语言环境的差异会消失，因为根本不会出现分隔符。

new Intl.NumberFormat('en-IN', {
  useGrouping: false
}).format(1234567);
// "1234567"

使用字符串值进行高级分组控制

useGrouping 选项接受字符串值，这些值可以更精细地控制分组分隔符的显示时机。这些值是 Intl.NumberFormat V3 规范的一部分，并在现代浏览器中得到支持。

"always" 值等同于 true，始终显示分组分隔符。

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(1234);
// "1,234"

"auto" 值遵循语言环境的分组偏好。大多数语言环境倾向于显示分组分隔符，因此在实践中，"auto" 类似于 "always"。当 notation 不是 "compact" 时，这是默认值。

new Intl.NumberFormat('en-US', {
  useGrouping: 'auto'
}).format(1234);
// "1,234"

"min2" 值仅在第一组中至少有两位数字时显示分组分隔符。对于四位数，这意味着不会出现分隔符。

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(1234);
// "1234"

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(12345);
// "12,345"

数字 1234 的第一组中只有一位数字（1），因此不会出现分隔符。数字 12345 的第一组中有两位数字（12），因此会出现分隔符。

这种行为与某些语言环境自然格式化数字的方式一致。例如，西班牙语通常会省略四位数的分组分隔符。

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(1234);
// "1234"

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(12345);
// "12.345"

"auto" 值尊重这些语言环境的偏好，而 "always" 会覆盖它们。

new Intl.NumberFormat('es-ES', {
  useGrouping: 'always'
}).format(1234);
// "1.234"

选择何时禁用分组分隔符

在数字表示代码、标识符或技术值而非数量的情况下，禁用分组分隔符。

序列号和产品代码不应包含分组分隔符。

const serialNumber = 1234567890;

new Intl.NumberFormat('en-US', {
  useGrouping: false
}).format(serialNumber);
// "1234567890"

这可以避免混淆分隔符是否是实际值的一部分。用户看到 1,234,567,890 时可能会疑惑逗号是否有意义，或者在其他地方输入数字时是否需要输入这些逗号。

邮政编码、电话号码（当以纯数字格式显示时）以及其他固定格式的标识符在禁用分组时会更有益。

const zipCode = 90210;

new Intl.NumberFormat('en-US', {
  useGrouping: false,
  minimumIntegerDigits: 5
}).format(zipCode);
// "90210"

用于调试或日志记录的技术显示通常应禁用分组，以显示精确的数字表示。

console.log(`Processing ${
  new Intl.NumberFormat('en-US', {
    useGrouping: false
  }).format(bytesProcessed)
} bytes`);
// "Processing 1234567 bytes"

数字值的表单输入在编辑期间通常会禁用分组，以避免用户混淆是否需要输入分隔符。在用户完成输入后，格式化显示可以显示分组。

选择何时启用分组分隔符

对于表示数量、测量值或金额的数字，启用分组分隔符可以帮助用户快速阅读和理解。

财务金额在使用分组分隔符时更容易扫描。

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: true
}).format(1234567.89);
// "$1,234,567.89"

分隔符帮助用户一眼区分 $1,234,567 和 $123,456。

统计数据、分析仪表板和显示计数的报告在使用分组时会更有益。

const pageViews = 5432198;

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(pageViews);
// "5,432,198 views"

较大的测量值在使用分组时更易读。

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: true
}).format(384400);
// "384,400 km"

这个距离（到月球的近似距离）以 384,400 的形式比 384400 更容易阅读。

任何需要用户理解数字大小的上下文都可以从分组分隔符中受益。分隔符创建了视觉标记，有助于大脑将数字分块处理。

使用 min2 实现更简洁的四位数显示

"min2" 值为可能是四位或五位的数字提供了更简洁的外观。例如，年份通常在没有分隔符的情况下看起来更好。

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(2025);
// "2025"

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(2025);
// "2,025"

大多数读者在提到年份时会觉得 2025 比 2,025 更自然。"min2" 设置会自动提供这种行为。

某些范围内的价格也会从这种方法中受益。

const price = 1299;

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(price);
// "$1299.00"

一些零售商更喜欢显示像 $1299 这样的价格，而不是带逗号的价格，以在心理上让价格显得更便宜。一旦价格超过四位数，分隔符就会出现。

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(12999);
// "$12,999.00"

这使您可以在整个价格范围内实现一致的行为，而无需手动检查数字的大小。

理解紧凑表示法如何影响分组

使用紧凑表示法时，默认的 useGrouping 行为会从 "auto" 更改为 "min2"。这可以防止在紧凑格式中出现不必要的分隔符。

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(1234);
// "1.2K"

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  useGrouping: 'always'
}).format(1234);
// "1.2K"

紧凑表示法已经对数字进行了缩写，因此内部的分组分隔符会显得多余。格式化器会自动处理这一点，但如果需要，您可以覆盖它。

检查当前的分组设置

resolvedOptions() 方法显示格式化器实际使用的 useGrouping 值。

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

formatter.resolvedOptions().useGrouping;
// "auto"

即使创建格式化器时没有显式设置 useGrouping，解析的选项仍会显示默认值 "auto"。

const compactFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact'
});

compactFormatter.resolvedOptions().useGrouping;
// "min2"

紧凑表示法格式化器的默认值是 "min2" 而不是 "auto"，如解析的选项所示。

此方法通过显示格式化器实际使用的设置，有助于调试意外的分组行为。