@babel/plugin-transform-numeric-separator

numeric-separator - 图1info

This plugin is included in @babel/preset-env, in ES2021

Example

Decimal Literals

JavaScript

  1. let budget = 1_000_000_000_000;
  3. // What is the value of `budget`? It's 1 trillion!
  4. //
  5. // Let's confirm:
  6. console.log(budget === 10 ** 12); // true

Binary Literals

JavaScript

  1. let nibbles = 0b1010_0001_1000_0101;
  3. // Is bit 7 on? It sure is!
  4. // 0b1010_0001_1000_0101
  5. //             ^
  6. //
  7. // We can double check:
  8. console.log(!!(nibbles & (1 << 7))); // true

Hex Literal

JavaScript

  1. // Messages are sent as 24 bit values, but should be
  2. // treated as 3 distinct bytes:
  3. let message = 0xa0_b0_c0;
  5. // What's the value of the upper most byte? It's A0, or 160.
  6. // We can confirm that:
  7. let a = (message >> 16) & 0xff;
  8. console.log(a.toString(16), a); // a0, 160
  10. // What's the value of the middle byte? It's B0, or 176.
  11. // Let's just make sure...
  12. let b = (message >> 8) & 0xff;
  13. console.log(b.toString(16), b); // b0, 176
  15. // What's the value of the lower most byte? It's C0, or 192.
  16. // Again, let's prove that:
  17. let c = message & 0xff;
  18. console.log(c.toString(16), b); // c0, 192

Octal Literal

hand wave emoji

Octals are great for permissions, but also look better when represented in 0o0000 form. No real benefit with separators here.

Installation

  • npm
  • Yarn
  • pnpm
  1. npm install --save-dev @babel/plugin-transform-numeric-separator
  1. yarn add --dev @babel/plugin-transform-numeric-separator
  1. pnpm add --save-dev @babel/plugin-transform-numeric-separator

Usage

With a configuration file (Recommended)

babel.config.json

  1. {
  2.   "plugins": ["@babel/plugin-transform-numeric-separator"]
  3. }

Via CLI

Shell

  1. babel --plugins @babel/plugin-transform-numeric-separator script.js

Via Node API

JavaScript

  1. require("@babel/core").transformSync("code", {
  2.   plugins: ["@babel/plugin-transform-numeric-separator"],
  3. });

Additional Information

If you need to further compile ES2015 Decimal, Binary, Hex and Octal number representations to their pre-ES2015 numeric literal form, add the “@babel/plugin-transform-literals” plugin:

numeric-separator - 图2info

@babel/plugin-transform-literals is already included in @babel/preset-env.

With a configuration file (Recommended)

babel.config.json

  1. {
  2.   "presets": ["@babel/preset-env"],
  3.   "plugins": ["@babel/plugin-transform-numeric-separator"]
  4. }
  5. {
  6.   "plugins": ["@babel/plugin-transform-numeric-separator", "@babel/plugin-transform-literals"]
  7. }

References