[format-num.js…or ES6!](https://remysharp.com/2016/12/13/format-numjsor-es6 "Permanent Link: format-num.js…or ES6!")

This is a quick tip post, but there’s a tonne of "cool" syntax features in ES6, but when you dig around a little more you’ll find a few nicities knocking around (which I tend to find by playing in devtools' console).

[![](/images/terminal-600.jpg)](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[$49 - only from this link](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

I was recently working on a node based project which needed to format a number from 1600.6666 to £1,600.67. Initially I went spelunking for a npm package that did the job for me. I found [format.js](http://formatjs.io/) and [numeral.js](http://numeraljs.com/)…and quite a number of other options.

But why add another library to my code, when I can use ES6?

toLocaleString(…)[](#tolocalestring)

Enter toLocaleString with powerups! Firstly, the function is available on a few prototype chains, including String and Number. We want the the Number (i.e. "1000".toLocaleString() doesn’t do want we want).

Let’s take a look (or play with [this bin](https://jsbin.com/pihahih/1/edit)):

// => 1,600.667
(1600.666666).toLocaleString();

// => 1.600,667
(1600.666666).toLocaleString('de-DE');

// => 1,600.67
(1600.666666).toLocaleString('gb-GB', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

// => 1,600.00
(1600).toLocaleString('gb-GB', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

So now instead of messing around with Math.round or .toFixed, if I have support for toLocaleString, then I’ll use it for perfect formating.

Published 13-Dec 2016 under #web. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/format-numjsor-es6.md)

Comments

Lock Thread

Add Comment[M ↓ Markdown]()

[Upvotes]()[Newest]()[Oldest]()

![](/images/no-user.svg)

Axel Rauschmayer

0 points

7 years ago

Technically, this belongs more to the ECMAScript Internationalization API (ECMA-402) than to ES6: [http://www.ecma-internation…;](http://www.ecma-international.org/ecma-262/6.0/#sec-number.prototype.tolocalestring)

More info on ECMA-402: [https://marcoscaceres.githu…;](https://marcoscaceres.github.io/jsi18n/)

Support by various engines: [http://kangax.github.io/com…;](http://kangax.github.io/compat-table/esintl/)

![](/images/no-user.svg)

Paul Crump

0 points

7 years ago

Why not use math terminology? Like minimumDecimalPlaces, maximumDecimalPlaces, and the same for sigificant figures.

![](/images/no-user.svg)

rem

0 points

7 years ago

I think you need to ask the Ecmascript committee, rather than me…

![](/images/no-user.svg)

WebReflection

0 points

7 years ago

Probably worth mentioning you can use navigator.language by default.

const localNum = (num) =&gt; num.toLocaleString(
  navigator.language,
  {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }
);

![](/images/no-user.svg)

Šime Vidas

0 points

7 years ago

😉 [https://uploads.disquscdn.c…;](https://uploads.disquscdn.com/images/e37afd7a1d7628234e599e67c8d9ca660b5866113f213372ff5fa86756a5b616.png)

[Commento](https://commento.io)