@babel/plugin-proposal-numeric-separator

What is @babel/plugin-proposal-numeric-separator?

The @babel/plugin-proposal-numeric-separator package is a Babel plugin that allows developers to use the numeric separator feature proposed for JavaScript. This feature enables developers to make their numeric literals more readable by creating a visual separation between groups of digits, similar to how commas or periods are used in some cultures to separate thousands or denote decimals.

What are @babel/plugin-proposal-numeric-separator's main functionalities?

Readable large numbers

Improves the readability of large numbers by allowing underscores as separators.

1000000 // Without numeric separator
1_000_000 // With numeric separator

Readable binary numbers

Enhances the readability of binary numbers by permitting underscores between bits.

0b1010101010101010 // Without numeric separator
0b1010_1010_1010_1010 // With numeric separator

Readable hexadecimal numbers

Improves the readability of hexadecimal numbers by allowing underscores between bytes.

0xDEADBEEF // Without numeric separator
0xDEAD_BEEF // With numeric separator

Readable BigInt literals

Enhances the readability of BigInt literals by permitting underscores as separators.

100000000000000000000n // Without numeric separator
100_000_000_000_000_000_000n // With numeric separator

Other packages similar to @babel/plugin-proposal-numeric-separator

typescript

TypeScript, a superset of JavaScript, includes support for numeric separators as part of its language features. It provides similar readability improvements for numeric literals. However, TypeScript is a full-fledged language with a compiler, whereas @babel/plugin-proposal-numeric-separator is a plugin for Babel that transpiles this specific feature.

eslint-plugin-unicorn

The ESLint plugin 'eslint-plugin-unicorn' includes a rule called 'numeric-separators-style' which enforces the consistent use of numeric separators in literals. While it doesn't transpile code like Babel, it helps maintain code quality and readability by linting the numeric separator usage.

README

@babel/plugin-proposal-numeric-separator

This plugin allows Babel to transform Decimal, Binary, Hex and Octal literals containing Numeric Literal Separator to their non-separated form.

Example

Decimal Literals

let budget = 1_000_000_000_000;

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

Binary Literals

let nibbles = 0b1010_0001_1000_0101;

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

Hex Literal

// Messages are sent as 24 bit values, but should be
// treated as 3 distinct bytes:
let message = 0xA0_B0_C0;

// What's the value of the upper most byte? It's A0, or 160.
// We can confirm that:
let a = (message >> 16) & 0xFF;
console.log(a.toString(16), a); // a0, 160

// What's the value of the middle byte? It's B0, or 176.
// Let's just make sure...
let b = (message >> 8) & 0xFF;
console.log(b.toString(16), b); // b0, 176

// What's the value of the lower most byte? It's C0, or 192.
// Again, let's prove that:
let c = message & 0xFF;
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 install --save-dev @babel/plugin-proposal-numeric-separator

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["@babel/plugin-proposal-numeric-separator"]
}

Via CLI

babel --plugins @babel/plugin-proposal-numeric-separator script.js

Via Node API

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

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:

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

Via .babelrc (Recommended)

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-numeric-separator"]
}
{
  "plugins": ["@babel/plugin-proposal-numeric-separator", "@babel/plugin-transform-literals"]
}

References

• Proposal: Numeric Separators