Up to Spec: JavaScript Numeric Separators

Numbers can be difficult to read in JavaScript, especially larger numbers. With Numeric Separators now making its way to stage four it’s more than likely going to be included in the next update to the ECMAScript (read: JavaScript) specification, so it’s good to get familiar.

There isn’t a good way to create a visual separation between digits in larger numbers. Take Christophe Porteneuve’s example of 1000000000, for instance. The number is difficult to parse. Is it 1 trillion? 100 million? 10 million? 10 trillion? 🤷‍♂️

Wouldn’t it be nice if you could add some commas to that number to allow you to have some comprehension of its value without having to, as I’ve done, count the number of trailing zeros? Enter Numeric Separators. With this likely-to-be-added JavaScript syntax you can now separate values within a number. 100000000 can be turned into 1_000_000_000 (congrats to those who put money on a trillion). Sure, an underscore is not a comma, but it’s a heckuva lot better than before!

The most obvious practical use is finance but an underscore can be used to separate HEX values, Binary, BigInt, and more.

Much of this will be familiar to those among us who have used numeric separators in other languages like Java, Ruby, Rust, Swift, and others. Many of whom are rolling their eyes at this small improvement.

And, yes, it is a somewhat minor syntactical change but we tend to read code way more than we write, so increasing legibility is really important and helpful. And now that ESLint supports it we may start seeing rules enforcing its use. It’ll make reading numbers 1_000 times easier. 😉

To the future!

About the Author

Object Partners profile.
Leave a Reply

Your email address will not be published. Required fields are marked *

Related Blog Posts
An Exploration in Rust: Musings From a Java/C++ Developer
Why Rust? It’s fast (runtime performance) It’s small (binary size) It’s safe (no memory leaks) It’s modern (build system, language features, etc) When Is It Worth It? Embedded systems (where it is implied that interpreted […]
Getting Started with CSS Container Queries
For as long as I’ve been working full-time on the front-end, I’ve heard about the promise of container queries and their potential to solve the majority of our responsive web design needs. And, for as […]
Simple improvements to making decisions in teams
Software development teams need to make a lot of decisions. Functional requirements, non-functional requirements, user experience, API contracts, tech stack, architecture, database schemas, cloud providers, deployment strategy, test strategy, security, and the list goes on. […]
JavaScript Bundle Optimization – Polyfills
If you are lucky enough to only support a small subset of browsers (for example, you are targeting a controlled set of users), feel free to move along. However, if your website is open to […]