JavaScript Numeric Separators

By  on  

Writing good code is important -- writing code that's easily human readable is a next level skill. It's not often that APIs are introduced whose seemingly only useful function is making code more readable, but let me introduce you to JavaScript numeric separators: an API that lets developers use underscores to make numbers more readable!

Consider the following number in your code:

// No commas for numbers in JavaScript
const oneHundredThousand = 100000;

Large numbers have always been difficult to mentally parse for engineers, so using underscores to make code more readable is a total win:

const oneMillion = 1_000_000; // 1000000
const decimals = 1_000_00.01_02_03 // 100000.010203

The only real rule with numeric separators is that the number cannot start or end with an underscore.

Numeric separators within JavaScript seem like spec creators gifting developers a feature. As an engineer, I'll take all I can get. You never stop learning in the world of JavaScript!

Recent Features

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Sliding Labels Using MooTools

    A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn't require much MooTools code either! The HTML A...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!