Numeric Separators in JavaScript

Writing performant code is not enough as a developer. We need to ensure that it is readable as well. And it is rare that an API change in a language introduces readability. Numeric Separators are one such rare change.

Why numeric Separators?

Reading this takes a few seconds:

- Advertisement -
const number = 100000000;

Counting the number of zeroes is something nobody wants to do. It takes some mental capacity but there was no other way of writing them until now. With numeric separators, we can now use underscores to separate numeric literals.

How?

const number = 100_000_000;

The rules with separators are pretty obvious ones. The number cannot start or end with underscores and there cannot be two consecutive underscores in a literal.

Also, it can be applied to binary, octal and hex numbers too!

const binary = 0b1_0000; // 16
const octal = 0o1_0_0_1; // 513
const hex = 0xA_B_C_0_0; // 703488

It is widely supported as well. IE is the only browser that does not have support. You can see the complete list here.

Let us go and make our numbers easier to read!

Recent Articles

How to sort a Set in JavaScript

ES6 introduced the set data structure in JavaScript. But sets are not ordered abstract data structures. So there is no .sort() property...

Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum...

CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element....

How to fix “invalid active developer path” after MacOS update

If you are here, then you are getting an "invalid active developer path" error on running commands in the terminal after a...

Getting the value of an input element as a number without parseInt

Every once in a while, you come across something and you think, how did I not know this earlier? valueAsNumber is that thing...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.