Javascript Number.toFixed() Method

Posted October 29, 2007 at 8:03 AM by Ben Nadel

Tags: Javascript / DHTML

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!

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment