_) was introduced to make numbers more readable by creating a visual separation between groups of digits. The separator can be used with decimal, binary, hexadecimal or BigInt numbers. This feature was introduced in ES12.
It is difficult for humans to read large numbers quickly. What about 1000000000? Is it a billion or 10 million?. Numeric separators make developers’ life easy.
const num = 1000_000_000; // Definitely a billion
Numeric separator is purely for visual separation. It does not have any impact in the functionality. In fact, comparing a number with separator and that without it, results in
console.log(1000_000_000 === 1000000000); // true
Position of Separator
The numeric separator can appear anywhere inside the number. Following are valid usages of numeric separators.
Numeric separator is not allowed at the end of a number. Therefore, following number is invalid.
Also, if a number starts with
const a = _123;
_123 is considered as a variable name. Since that variable is not declared, above code will throw reference error.
Separators in Fractional Part
Numeric separators can be placed in the fractional part of a number.
Here are some examples that consider different use cases of numeric separator.
0b. While writing a binary literal, we can place numeric separator to make it more readable.
console.log(0b11_1); // 7
console.log(0b111); // 7
111 is the binary equivalent of decimal number
0x. We can include numeric separator in a hexadecimal number.
console.log(0xF_F); // 255
console.log(0xA_B === 0xAB); // true
Note that the decimal equivalent of
A BigInt literal can contain a numeric separator.
const a = 1_309_89n;
console.log(typeof a); // "bigint"
console.log(a.toString()); // "130989"
If we place an underscore
_ between the number and final
n, it will throw an error.
const a = 1_309_89_n;
Above code results in following error:
SyntaxError: Numeric separators are not allowed at the end of numeric literals
All the major browsers support numeric separators. We can see the precise information by visiting this CanIuse link.
This article originally published in Backbencher.dev