Javascript Number.toFixed() Method
While reading the book, Learning jQuery, I came across a Javascript method that I had never heard of. The .toFixed() method, which can only be called on numeric values, will return a string representation of the number with the given number of decimal places. For example, if you wanted to return a dollar formatted version of a number, you could call something like this:
("$" + (15).toFixed( 2 ))
This would take the number 15 and return the string, "15.00", to which we would prepped the dollar sign.
This is a function that I wish I had known about a long time ago. Formatting numbers has always been somewhat of a hassle in Javascript, especially after coming from ColdFusion where formatting numbers is an all-to-easy task. To see how this method works in detail, I decided to run a few tests on it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Javascript .toFixed() Example</title>
</head>
<body>
<script type="text/javascript">
// Create a string representation of the number
// that we want to format.
var StringValue = "1234.56789";
// Create a numeric representation of the number
// that we want to format by parsing the float
// value out of the string value.
var NumericValue = parseFloat( StringValue );
// The .toFixed() is a method of the Numeric object.
// But, let's try to call it on the string to see if
// there is any implicit type-casting done for us.
try {
document.write(
StringValue.toFixed( 2 )
);
} catch( Error ){
document.write(
"String value did not work<br />"
);
}
// We know that it works on the numeric object,
// but let's loop over it to see how it works before
// and after we pass the known number of digits.
for (intI = 0 ; intI < 10 ; intI++){
document.write(
NumericValue.toFixed( intI ) + "<br />"
);
}
</script>
</body>
</html>
While I know that it won't work on a String value, I ran a test on the string value of the number. This was just to see if Javascript would perform any kind of implicit data type conversion for us. Running this code, we get the following output:
String value did not work
1235
1234.6
1234.57
1234.568
1234.5679
1234.56789
1234.567890
1234.5678900
1234.56789000
1234.567890000
As you can see, it only works on numeric values. Also, you will notice that it rounds to the given decimal place (or to the closest integer if given "0" as the number of digits to display).
Very cool stuff; this will be a good tool to have in the Javascript tool belt.
Want to use code from this post? Check out the license.
Reader Comments
Great find, Ben! I've always been frustrated with trying to format numbers in JavaScript, too.
There are several ways to convert strings to numbers in JavaScript. One way is the parseFloat that you've shown here, but you can convert it directly into a number with the following:
var str = Number('1234.56789');
An alternate method of moving a string to number is to subtract 0 from it:
var str = '1234.56789' - 0;
alert(str.toFixed(2)); // assuming that the string is actually a number
Not that it's much, but it is a tiny bit faster than parseFloat, at least on my system, but the differences don't show up until you're well above 10,000 iterations. At 100,000 iterations it's approximately 265 milliseconds for minus zero to 469 milliseconds for the parseFloat method, so for most cases it's better to with the more readable parseFloat.
FWIW: try-catch is fairly expensive, it would probably be better to test a variable for the existence of the toFixed method than to use a exception:
var StringValue = '1234.56789';
if(StringValue.toFixed && typeof StringValue.toFixed === 'funciton'){
// write to page
}
else{
// something did not work
}
Also, you're assuming that the value that is in NumericValue is actually a number after calling parseFloat, but parseFloat will return NaN (Not a Number) if the string can't be converted into a float, so you should either have done a RegExp match on your string to make sure it is a number that you can work with, or check for NaN before you do any other processing that relies on the value being a number. For example:
var StringValue = 'This is no longer a number 1234.56789';
var NumericValue = parseFloat(StringValue);
if( !isNaN(NumericValue) ){
// do your loop
}
else{
// something went wrong
}
anyway, just had a moment so I rambled, hope you don't mind. :-)
@Danilo,
Thank you for the most excellent feedback. Very good suggestions here. I like the idea of using the Numeric() object constructor for creating numbers. I wonder, does it return NaN if you pass in a non-numeric value? I can test that on my, I was just thinking away...
@Ben,
Yes, Number(str) will be NaN if the value of str isn't converted into a number. Make sure that you use isNan() to check for values being NaN because NaN does not equal NaN.
var str = 's1234.56789';
var n1 = Number(str);
var n2 = Number(str);
alert(n1 == n2);
This alerts false even though n1 and n2 look like they might be equal, but because they are NaN they aren't.
In addition to the number-conversion methods already discussed here so far, you can also use the unary plus operator, e.g. +'10'. This is nice and cheap (performance-wise) and only adds one character.
As for toFixed(), you can save one character by using a space after a numeric literal, e.g. 10 .toFixed(2). If your numeric literal includes a decimal place you can even drop the space, e.g. 10.0.toFixed(2).
I tried to perform a rounding operation - however for numbers have the decimal point position > 14 (i.e. 13 digits exist before the decimal place) the rounding is incorrect. Is it because the number goes out of range for 'integer' in javascript? For instance, the above method fails for the number
12345678912345.123456
@Gayatri,
While I cannot say one way or the other, what you are suggesting sounds correct. That's a huge number! What are you doing? Calculating the number of bacteria in a culture or something (I sure hope you aren't working with dollars or that would just make me feel sad and insignificant :)).
That was really helpful, wanted you to know, thanks :)
Thanks for the info ... :)
What happens with this number 123456789012345.1
Example:
----------------------
a="123456789012345.1"
n = parseFloat(a);
s = n.toFixed(2);
----------------------
The result of s is: 123456789012345.09
it is wrong? why?
@Edu,
That's probably an issue with the ability to store FLOAT numbers past a certain size. That is a HUGE number you have there - probably larger than the script engine can store with accuracy.
var percent = (source1.value*1) * (source2.value*1);
source3.value = percent.toFixed(2);
Thanks
I actually thought it was a JQuery only function when I saw it in the JQuery ui.slider. This is an overlooked function similar to how the second parameter of String.parseInt() is overlooked.
See: http://www.bucabay.com/web-development/base-conversion-in-javascript/
for the example of String.parserInt
@Bucabay,
That's cool - I didn't realize that Javascript has a base() conversion method. That is super useful.
It doesn't have a base() method, but it can be put together simply with:
Math.base = function(n, to, from) {
return parseInt(n, from || 10).toString(to);
};
@Bucabay,
Oops - must have read too quickly. When I saw Math.base, I just assumed it was core. That said, I was not even aware that toString() could take an argument. I'll have to look into that as well.
I found this post while searching google. Quite surprising too, since google usually displays relatively old results but this one is very recent! Anyway, very informative, especially since this is not something many people tend to write something good.
Very userul, just had to say thanks!
Now there is a library to do strongly typed variables in Javascript: Typecast.js and it offers the type FLOAT which simplifies the use of toFixed() method.
http://TypecastJS.org
Typecast fixes what's wrong with Javascript by creating a complete platform for strongly-typed variables in Javascript. It works both in a browser and on Node.js servers. Typecast pairs well with jQuery by providing strongly typed variables without altering Javascript's native prototypes or requiring a custom compiler such as CoffeeScript, TypeScript or Clojure.
thank your Sir.....
I will say that instead of toFixed use Math.round()
It's much faster on most of the browsers.
Have a look at http://jsperf.com/parsefloat-tofixed-vs-math-round