1. Technology

Formatting Numbers

Join the Discussion

Questions? Comments?

When you are processing numbers with javascript the numbers you are working with don't have any fancy formatting such as thousands separators and currency symbols. The numbers also use the period character as a decimal point which may not be the correct symbol for your locality (some places use a comma for the decimal point).

Wouldn't it be nice to be able to properly format numbers before displaying them? Actually it is not that difficult and there are a number of different ways to do it. The way that I selected uses a couple of Math methods and some array manipulations to produce the required formatting allowing for just about all of the location based variations to how you might want to display numbers that I can think of.

The first thing that you need to do is to copy the following code and insert it into the Javascript that you have on the page where you are processing the numbers that you want to format.

Now when you want a nicely formatted number you just call the format number function before displaying the number. For example, let's say that we want to display the number with two decimal places using spaces for thousands separators (a common international standard) and a period for the decimal point. It isn't a monetary value so we'll leave the currency indicators blank. If the number is negative we'll keep the - on the front. If our number field is mynum then we would just replace the reference to mynum that is displaying with the following to display our formatted version.

formatNumber(mynum,2,' ','.','','','-','')

We can easily select different formatting by changing the values in the second through eighth parameters. The second parameter is the number of decimal places that the number should have. If the number contains more decimal places than required it will be rounded to the nearest number with that number of decimal places. If it has fewer decimal places than specified zeroes will be added to the end.

The third parameter is the thousands separator. In our example we used a space but a comma or period may be what is required for your location.

The fourth parameter is the decimal point. Either a period or comma is normal here.

The fifth and sixth parameters are used for monetary values and one or other of them will contain the currency symbol when required. If your location uses a currency symbol hard against the left of numbers then place that symbol by itself in the fifth parameter eg. '$'. If you normally have a space after the currency symbol then add it after the symbol in this '$ '. If your currency symbol comes after the amount instead of before then place it in the sixth parameter instead of the fifth parameter.

The seventh and eighth parameters define the symbols to place around the number when the value is negative. The usual values for these parameters would be '-','' but you may have a situation where you want to use '(',')' or even '',' CR'.

We'll look at one more example to finish off. This time we want two decimal places, commas for thousands separators, a period for a decimal point, a £ symbol followed by a space for the currency and a CR suffix for negative amounts.

formatNumber(mynum,2,',','.','£ ','','',' CR')

Of course you may prefer to assign any of these values to variables and pass those variables to the function instead which would make keeping track of which parameter is which much easier.

Note that if a number contains more than 15 significant digits that this function will not be able to format it properly as the internal format in which numbers are stored in Javascript does not maintain any more digits than that when performing numerical calculations. In any case numbers bigger tnan that ought to be displayed in scientific notation which this formatting function is not set up to handle.

Related Video
Formatting HTML text

©2014 About.com. All rights reserved.