Make JavaScript Numbers more readable using Numeric Separators

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 7 months ago
Updated 2 months ago

You can finally make your numbers more readable in JavaScript. Add underscores in all types of numbers including BigInt, floats, hexes, octals, and binary to improve their readability.

Just don't add the underscores to the beginning or end!

[00:00] Use the underscore character to separate certain digits in a way we write certain numbers. So here we've got a bunch of example numerical values. Here are some decimal values. Here we've got a binary representation. Here we've got an octa and a hexadecimal [00:21] representation. And finally, we've got a big end value. So all of them are valid JavaScript numbers. So let's take a look at how we can make these more readable. So the whole thing is that we put an underscore in between the 2 digits somewhere in the number literal. So [00:41] it's very useful and convenient for us to put the underscore when having big numbers, each 3 digits so that we can quickly see what is the order of magnitude of a certain number. The same way here, we can put every, underscore between every 3 digits. So we don't need to put it every [01:01] 3 digits. It basically depends on what is convenient for us in a certain use case. So we could put it this way, though, that would not be very useful. But if we move away from decimal representation into, let's say, a binary representation, that would be way more useful. Let's put a separation each 4 bits [01:21] like this one so that we can quickly see that here we've got 4 bits and 4 bits. So this is 1 byte. Again, this is 1 byte. So this is a 2 byte value, 2 byte representation. Or if somebody would basically like to have 8 digits, we can quickly see that this is basically being a 2 byte [01:41] value. Whatever is convenient for you, we can also put the separation in the octa representation or in a hexadecimal representation so that we can separate certain digits over here. And the same way, we can also put the separation within a big int value over [02:00] here. So these are all valid values as well. Let me just put the underscore in the fraction and in the exponential part of the values. These are all valid. So we can take a look at what is the binary, what is the octa value, what is the big int, what [02:20] is the hexa value, as well as what is the 1 millionth. So there is, actually no difference between the values. Underscore is being purely ignored. So one thing that you could, pay attention to is that this underscore cannot be anywhere. [02:40] It has to be between any of the digits of the literal. So for instance, if this is a bigint value, basically one as a big int, we cannot put it over here because the underscore cannot be at the very end. So basically, this is a syntactic limitation. [03:00] In the same way, it cannot be at the very beginning because underscore is treated as the character that is a part of the identifier. So in this case, JavaScript is trying to look for, variable or for any token that has this exact name.

egghead
egghead

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today