JavaScript: Format whole numbers using toLocaleString()

Question

I'm using the Number.prototype.toLocaleString() function to add commas to whole numbers. Documentation for it can be found here.

I am writing it as follows:

Number(data).ToLocaleString('en');

In Firefox/Chrome the number is displayed like 123,456,789. However, in IE it is displayed like 123,456,789.00.

1. Why is IE adding in the decimal point values?

2. How can I remove the decimal point values?

Rather than creating/using a custom function, I'm really just wondering if there is an option that I can add to ToLocaleString() like en, nodecimal. If that option is not available, I will consider a custom function.

Answer 1

How about toLocaleString:

const sum = 1000;

const formatted = sum.toLocaleString("en", {   
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
});

console.log(formatted);

for:

// 1,000

Or if you're into the money stuff:

const sum = 1000;

const formatted = sum.toLocaleString("en", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
});

console.log(formatted);

for:

// $1,000

Replace "en" with one of the supported language tags*. For instance:

'en-US'
// en => a BCP 47 tag that represents a language
// US => a ISO_3166-1 Alpha-2 subtag that represents a country | optional

Replace "USD" with a ISO-4217 currency code. For instance:

'EUR'
// EUR is currency #978 on the active currencies codes list. 
// The result would be a numeric value prefixed by the € sign 

* Further information is available on the BCP 47 and ISO 3166-1 wikis.

Answer 2

1) Refer to Andy E's (1) answer.

2) Andy E's solution works on IE 10 and lower but seems to cause the wrong outputs on modern browsers (try it in the console with any number). Here is a safer string manipulation:

Number(data).toLocaleString().split('.')[0];

*Andy I would have added this as a comment to your answer but I don't have enough reputation.

Answer 3

Which version of IE did you test in? In IE 10 and lower, toLocaleString is based on the ECMAScript specification, which states that the function should be "implementation dependant". In IE 11, it is based on the ECMA Internationalization API, and should be consistent with Firefox 26.

To remove the decimal values in IE 10 and lower (and potentially, other older browsers), you'll have to resort to string manipulation:

Number(data).toLocaleString('en').slice(0, -3);

There's also a polyfill available for this API, which will work for IE 10 and lower. Including it at the moment is a little tricky, since the browser/minified build contains no actual data (because it would be huge). The data is provided separately in JSON or JSONP format, so that you can download the correct data for the user currently browsing your site.

Answer 4

Number(data).toLocaleString().replace(/\D\d\d$/, ''); should cover any locale and browser.