Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with:

Javascript Number.toFixed() Method

By Ben Nadel on

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.

Tweet This Groovy post by @BenNadel - Javascript Number.toFixed() Method Thanks my man — you rock the party that rocks the body!



Reader Comments

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. :-)

Reply to this Comment

@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...

Reply to this Comment

@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.

Reply to this Comment

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).

Reply to this Comment

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

Reply to this Comment

@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 :)).

Reply to this Comment

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?

Reply to this Comment

@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.

Reply to this Comment

@Bucabay,

That's cool - I didn't realize that Javascript has a base() conversion method. That is super useful.

Reply to this Comment

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);
};

Reply to this Comment

@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.

Reply to this Comment

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.

Reply to this Comment

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.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
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.