Skip to content
Hongzzz's Blog
Go back

JavaScript 数字分隔符(Numeric Separators)

在数字字面量中使用下划线 _ 作为分隔符,让大数字更易阅读。30_000 等价于 30000,不影响值本身。ES2021 正式标准,可放心用于日常开发。

语法

在数字的任意两个数位之间插入 _ 即可。

const billion = 1_000_000_000;      // 1000000000
const price = 1_050.95;             // 1050.95
const hex = 0xA0_B0_C0;            // 10531008
const binary = 0b1010_0001;        // 161
const octal = 0o2_2_5_6;           // 1198
const bigInt = 1_000_000n;         // 1000000n

分隔符纯粹是视觉辅助,引擎解析时会忽略它。30_000 === 30000true

使用规则

规则合法示例非法示例
只能放在数位之间1_000_10001000_
不能连续使用多个1_000_000100__000
不能紧跟前导 00x1_00_1
不能放在小数点旁1_000.51_.51._5

违反规则会抛出 SyntaxError

适用的数字类型

常见陷阱

parseInt 和 Number 无法解析含 _ 的字符串

数字分隔符只在源代码字面量中有效,不适用于字符串解析。

parseInt("123_456");    // 123(在 _ 处停止解析)
Number("123_456");      // NaN

要解析含分隔符的字符串,先移除下划线:

Number("123_456".replaceAll("_", ""));  // 123456

JSON 不支持数字分隔符

JSON.parse('{ "value": 1_000 }');  // SyntaxError

规范与浏览器兼容性

ECMAScript 规范: Numeric Separators(ES2021 / ES12 正式纳入)

提案: tc39/proposal-numeric-separator(Stage 4)

运行环境最低版本
Chrome75
Firefox70
Safari13
Edge79
Node.js12.5.0

均已支持,无需 polyfill。

构建工具支持

数字分隔符是纯语法糖,构建时直接移除下划线:30_00030000

工具支持情况
Babel (@babel/preset-env)已内置 @babel/plugin-transform-numeric-separator,无需额外配置
TypeScript原生支持,tsc 编译时自动移除
ESBuild原生支持
SWC原生支持

主流构建工具都已支持,转换零成本、零风险。

日常开发建议

推荐使用的场景

场景不用分隔符用分隔符收益
毫秒常量setTimeout(fn, 30000)setTimeout(fn, 30_000)一眼看出是 30 秒
金额const price = 1500000const price = 1_500_000快速判断量级
位掩码0b001001000b0010_0100按字节分组更清晰
颜色值0xFF88000xFF_88_00RGB 分组
文件大小maxSize = 10485760maxSize = 10_485_76010MB 一目了然

不需要使用的场景

ESLint 规则

如果团队希望统一风格,可以启用 ESLint 的 @stylistic/number-separator 规则,强制对超过一定位数的数字使用分隔符。

实际应用场景

// 金额更清晰
const budget = 1_500_000;

// 权限位掩码一目了然
const permissions = 0b0010_0100;

// 颜色值分组
const color = 0xFF_88_00;

// 毫秒常量
const TIMEOUT = 30_000;       // 30 秒
const ONE_DAY = 86_400_000;   // 24 小时

Share this post on:

Next Post
Typescript 5 装饰器