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!
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

Carlo Sabogal
7,468 PointsJavascript 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

Richard Price
17,787 PointsDid 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"

Zoltán Holik
3,401 PointsYou can use an array.
var numbers = [1,2,3,4,5,6,7,8,9];
document.write(numbers);

Carlo Sabogal
7,468 PointsI am trying to display a number such as 12345.5432. An array doesn't help.

Zoltán Holik
3,401 Pointssorry, 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(/[.]/, ","));

Ted Sumner
Courses Plus Student 17,967 PointsZoltan 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
3,401 PointsSorry but when you write out an array to the screen, with document.write or with innerHTML you get the commas :)

Ted Sumner
Courses Plus Student 17,967 PointsWhen 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
7,468 PointsThanks 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.

Ted Sumner
Courses Plus Student 17,967 PointsEDIT: 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.

Ted Sumner
Courses Plus Student 17,967 PointsI 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.
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsI 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.
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsI agree this is the proper way in looking at it in more detail.
Carlo Sabogal
7,468 PointsCarlo Sabogal
7,468 PointsThanks 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.
Richard Price
17,787 PointsRichard Price
17,787 PointsMy 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
7,468 PointsCarlo Sabogal
7,468 PointsRichard, 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
Courses Plus Student 21,241 PointsRyan Field
Courses Plus Student 21,241 PointsIf 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.