Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Carlo Sabogal
Carlo Sabogal
7,468 Points

Javascript Formatting numbers with commas

My level of js is very basic. Currently I am learning about basic number operations. My question is: How do you display numbers on the screen with commas? I tried the .tolocalstring() method, but it doesn't work with a number with several decimal points for example: 12345.5432.

Please I need a clear example since my level is basic, including the function and how to apply it to the variable and finally show on page. If there is a class or a good read you can point me too, that also will help. Much appreciated. Thanks.

5 Answers

Did you add the locale to the toLocaleString function?

for example

var number = 12345.543;
number.toLocaleString('en')

if i print the above code in the console it shows "12,345.543"

I would have to check, but that would change it to a string, I think. But you could then change it back. I think there is a better way IF there is only one decimal point.

I agree this is the proper way in looking at it in more detail.

Carlo Sabogal
Carlo Sabogal
7,468 Points

Thanks Richard.

It works, but it doesn't display the 4th decimal (the number was 12345.5432). I am currently working on a project for a financial services company, so I need a function to display all decimals, which is why i added such a complicated number as an example.

My apologies Carlo, i missed that bit.

in the documentation it says you can add various options including a max significant figures. So if you run the function like so

number.toLocaleString('en', {maximumSignificantDigits : 21})

You'll obviously see 21 significant digits which should hopefully be enough for you :)

full documentation below

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Carlo Sabogal
Carlo Sabogal
7,468 Points

Richard, thanks for your help I appreciate it.. I was able to use the function successfully. The only issue is that is not supported by Safari and older browsers (IE 10 for example), and mobile.

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

If you want full support across all browsers, you might have to resort to changing the number to a string, splicing it, adding commas at every third position in the first part, and then displaying all three parts (the first part, the period, and then the trailing decimal places) to the screen that way.

Zoltán Holik
Zoltán Holik
3,401 Points

You can use an array.

var numbers = [1,2,3,4,5,6,7,8,9];
document.write(numbers);
Carlo Sabogal
Carlo Sabogal
7,468 Points

I am trying to display a number such as 12345.5432. An array doesn't help.

Zoltán Holik
Zoltán Holik
3,401 Points

sorry, maybe i misunderstood something. :) Why do you want to use a number with several decimal ponts?

You would like to change the decimal point to a comma?

If yes, you need to replace the decimal point to a comma, but in this case the result is a string not a number.

var number = 143.42673452345;
document.write(number.toString().replace(/[.]/, ","));

Zoltan Holik, an array will not produce the comas. Those are just separators.

Carlo, I am not sure it is really a number if it has more than one decimal point. You have integers, float, and exponential. Once you add more than one decimal point you have a string.

Zoltán Holik
Zoltán Holik
3,401 Points

Sorry but when you write out an array to the screen, with document.write or with innerHTML you get the commas :)

Try it: http://codepen.io/anon/pen/GJZVPe

When you call the array without specifying which part of the array you want, you are, in essence, turning the array into a string variable. Change your code to numbers[0] and it returns 1 without the comma. 1 is the value in the 0 spot of the array.

As I understand the issue, you have a number with a value of 1000 or more. Carlo wants JS to automatically add a comma like this: 15,000. He does not want 15000. The issue I have is he also says that it has more than one decimal point. I believe if there is more than one decimal point it is a string, not a number.

Any type of manually inserting a comma defeats the purpose because it has to be manually formatted each time.

I may be misunderstanding the issue, though.

Carlo Sabogal
Carlo Sabogal
7,468 Points

Thanks for the answers.

I am currently working on a project for a financial services company, so I need a function to display all decimals, which is why i added such a complicated number as an example (12345.5432). I have seen some very complicated functions online, but don't understand them at all, and could not make them work. If anyone can find one that works and explain to me how to apply it I would appreciate it. thanks.

EDIT: I think I have the wrong language for this. Sigh.

The function you want is here:

https://developer.mozilla.org/en-US/docs/Web/XPath/Functions/format-number

Unfortunately, I am not sure what the pattern would be and I don't have time to follow the links and figure it out.

This also returns a string. In thinking about it more, I think any number with a comma is a string. You will have to convert it back to a number (or define the string in a special variable, a better solution) before you can use it as a number again.

I think you need to be VERY careful about security with a financial services company site if there is ANY identifiable information. You may need to encrypt the information if it is sensitive.