How to Internationalize Numbers with JavaScript

By  on  

Presenting numbers in a readable format takes many forms, from visual charts to simply adding punctuation. Those punctuation, however, are different based on internationalization. Some countries use , for decimal, while others use .. Worried about having to code for all this madness? Don't -- JavaScript provides a method do the hard work for you!

The Number primitive has a toLocaleString method to do the basic formatting for you:

const price = 16601.91;

// Basic decimal format, no providing locale
// Uses locale provided by browser since none defined
price.toLocaleString(); // "16,601.91"

// Provide a specific locale
price.toLocaleString('de-DE'); // "16.601,91"

// Formatting currency is possible
price.toLocaleString('de-DE', { 
  style: 'currency', 
  currency: 'EUR' 
}); // "16.601,91 €"

// You can also use Intl.NumberFormat for formatting
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'GBP'
}).format(price); // £16,601.91

It's a major relief that JavaScript provides us these type of helpers so that we don't need to rely on bloated third-party libraries. No excuses -- the tool is there!

Recent Features

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    iPhone-Style Passwords Using MooTools PassShark

    Every once in a while I come across a plugin that blows me out of the water and the most recent culprit is PassShark: a MooTools plugin that duplicates the iPhone's method of showing/hiding the last character in a password field. This gem of...

  • By
    CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

Discussion

  1. Simple usage without specifying a locale returns a formatted string in the default locale and with default options.

    const number = 3500;
    
    console.log(new Intl.NumberFormat().format(number));
    // '3,500' if in US English locale
    

    See more options with dashingarts.

  2. Is there any difference in the formatting between

    toLocaleString

    and format using

    new Intl.NumberFormat(...)

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