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

Hank Andre profile.

Hank Andre

Sr. Consultant

Hank has a passion for puzzles and by a stroke of serendipity found himself developing software. Since he has some minute experience in graphic design he initially felt drawn to the frontend, where he was (and is) passionate about accessibility, performance, and general user experience. In recent history he’s begun to find himself dabbling more and more with Node.js. Hank loves to teach, talk, and laugh.

 

Most of Hank’s posts are preview on his personal site first: hankandre.com

Leave a Reply

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

Related Blog Posts
TICK Stack Monitoring for the Non-Technical
TICK – Telegraf, Influx, Chronograf, and Kapacitor – is a method of monitoring your systems and applications. In this article, I discuss in non-technical terms what the difference is between TICK and Prometheus Grafana A […]
Design Systems, Part 1 • Introduction
Business leaders need a practical guide to plan and execute Design System Initiatives. The aim of this series is to be that guide. This installment introduces terms and definitions as a primer on Design Systems.
ML for Translating Dysarthria Speech (Pre-Part 1)
What is Dysarthria? Per the Mayo Clinic, Dysarthria occurs when the muscles you use for speech are weak or you have difficulty controlling them. Dysarthria often causes slurred or slow speech that can be difficult […]
Develop Quality Code
As software continues to dominate every facet of our lives, developers are faced with an ever-increasing pressure to produce bug free code. The responsibility of clean quality software falls upon everyone that is involved in […]