JavaScript: Format whole numbers using toLocaleString()

javascript number format comma
tolocalestring currency
javascript format number with commas and decimal
jquery format number to currency
tolocalestring format yyyy-mm-dd
locale number format
lodash format number
js format number

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.

How about:

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:

const sum = 1000;

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

console.log(formatted);

for:

// $1,000

An Awesome Way to Format Numbers in JavaScript, Tagged with javascript, tolocalestring, number, format. Well, so why not use toString if that's all the toLocaleString method does? The toLocaleString() method converts a number into a string, using a local language format. The default language depends on the locale setup on your computer. Browser Support

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.

Number.prototype.toLocaleString(), See the Intl.NumberFormat() constructor for details on these Use the host default language with options for number formatting var num  In this short post, we'll briefly explore the Javascript toLocaleString method to convert dates/times and numbers to a human readable format.

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.

JavaScript: Outputting a Number in Traditional Currency Format , This means to show two decimal places (with or without automatic rounding), are to have JavaScript format user-input numbers as traditional currency. By default the toLocaleString function shows no decimals if none were show a whole number… or just a single decimal if one place was provided. The toLocaleString method in JavaScript is present on the array, date, number object and object data types. This article focuses on the toLocaleString method on JavaScript number objects. The toLocaleString method, when called on a JavaScript number identifier, formats the number based on the values passed into it and returns a string representation of the formatted value.

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

TIL: toLocaleString() for currency formatting, TIL: toLocaleString() for currency formatting. Yesterday I learned about toLocaleString , a Javascript function defined on the Number prototype  In order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var number = 123456.789; // German uses comma as decimal separator and period for thousands console.log(number.toLocaleString('de-DE')); // → 123.456,789 // Arabic in most Arabic speaking countries uses Eastern Arabic digits console.log(number.toLocaleString('ar-EG')); // → ١٢٣٤٥٦٫٧٨٩

TypeScript number Data Type, Just like Javascript, Typescript supports number data type. toLocaleString(), Converts the number into a local specific representation of the number. exponential notation of a number in string format, based on the specified fraction digits. The toLocaleString () method converts a Date object to a string, using locale settings. The default language depends on the locale setup on your computer. Browser Support. #N#toLocaleString () Date .toLocaleString ( locales, options) Parameter Values. Optional. Which language specific format to use. Click on the "Try it" button to see all

How to print a number with commas as thousands separators in , How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ? The format() method of this object can be used to return a string of the number in The toLocaleString() method is used to return a string with a language-​sensitive Examples · How to convert a float number to the whole number in JavaScript? In JavaScript, a number can be a primitive value (typeof = number) or an object (typeof = object). The valueOf() method is used internally in JavaScript to convert Number objects to primitive values. There is no reason to use it in your code. All JavaScript data types have a valueOf() and a toString() method.

Javascript: how to format numbers to locale with currency, To format numbers with locale formatting conditions, you can use toLocaleString​() method of Javascript Number object. So, for example: var data = 10000000  Take a look at the JavaScript Number object and see if it can help you. toLocaleString() will format a number using location specific thousands separator. toFixed() will round the number to a specific number of decimal places. To use these at the same time the value must have its type changed back to a number because they both output a string.

Comments
  • It really outputs that in Firefox ?
  • 1) that's not valid JS. 2) toLocaleString is "implementation-dependent" according to the spec.
  • @adeneo Yep. Using v26
  • @p.s.w.g Woops. Added an extra period. Changed it.
  • @HarryPehkonen. I understand that I could change my computer settings to achieve the desired affect personally, but my goal is to change it for all end users who come to my website. I have no control over their computer settings.
  • Was minimumFractionDigits and maximumFractionDigits recently introduced? I don't believe that was an option back when I asked the question.
  • @Keven You're probably right. From googling it, it seems that in 2015 it was already available stackoverflow.com/questions/31581011/… so perhaps around a year after you asked
  • sounds like this should be accepted answer in 2019
  • I'm testing in IE9 and below and need to support IE 10 and below so it looks like I'll need to manipulate then.
  • This will not work in certain locales. For example: Number(123534.34).toLocaleString('da-DK',{style:'currency',currency:"DKK"}) which displays as 123.534,34 kr.. Instead you should set the maximumFractionDigits and minimumFractionDigits options to 0, as specified here. For example: Number(123534.34).toLocaleString('da-DK',{style:'currency',currency:"DKK",maximumFractionDigits:0, minimumFractionDigits:0}); which will display 123.534 kr.
  • This works fine when you know the separator is a dot ("."), what about commas as in French and others?
  • This will not work in certain locales. For example: Number(123534.34).toLocaleString('da-DK',{style:'currency',currency:"DKK"}) which displays as 123.534,34 kr.. Instead you should set the maximumFractionDigits and minimumFractionDigits options to 0, as specified here. For example: Number(123534.34).toLocaleString('da-DK',{style:'currency',currency:"DKK",maximumFractionDigits:0, minimumFractionDigits:0}); which will display 123.534 kr.
  • Great solution. Retains the thousand separator. and doesn't throw a tantrum if a number doesn't contain decimals (in later browsers).
  • This will not work in certain locales. For example: Number(123534.34).toLocaleString('da-DK',{style:'currency',currency:"DKK"}) which displays as 123.534,34 kr.. Instead you should set the maximumFractionDigits and minimumFractionDigits options to 0, as specified here. For example: Number(123534.34).toLocaleString('da-DK',{style:'currency',currency:"DKK",maximumFractionDigits:0, minimumFractionDigits:0}); which will display 123.534 kr.
  • In the OP's question, isn't that what he would want? He's only using whole numbers and IE is adding the .00 - or in your case ",00"