JavaScript parseFloat() Function
This tutorial introduces JavaScript's parseFloat() function. parseFloat() is a built-in core JavaScript function that doesn't belong to the Number object. But we'll cover it with other Number object tutorials since parseFloat, like its sibling parseInt(), mostly deal with numerical values. The parseFloat() function attempts to extract a floating point number ("a float") from a string. A commonly used data type (think of web form input), string is also the data typed returned by all JavaScript Number object's methods.
Using the JavaScript parseFloat() Function
JavaScript's parseFloat() function takes one string value argument. parseFloat() will attempt to convert this argument to a floating point numerical value (a float).
var numex = "3.14";
alert( parseFloat(numex).toString() );
The easy string to float conversion above posed no problem for the parseFloat() function, which correctly identified the string-quoted number:
The piece of code below now mixes non-numerical characters to the quoted number.
var numex = "The value of Pi is ~3.14";
alert( parseFloat(numex).toString() );
As we experienced with the parseInt() function, the parseFloat() function easily reaches its limit, and was not able to convert our string to a float:
This illustrates how the parseFloat() function expresses its failure: it returns the NaN Number property (which stands for "Not a Number"). This is fortunate, since it let's you predict what to expect in case of failed string-to-float conversion.
Handling NaN Values Returned by the parseFloat() Function
Whenever the parseFloat() function cannot convert a string to a floating point number, it simply returns NaN ("Not a Number"). This allows you to easily check if the conversion was successful or not, before proceeding with your next code statement, by using the isNaN() function (covered next).
var bookPrice = "This book costs $14.95";
if( isNaN( parseFloat(bookPrice) ) )
alert(" Please re-enter the book price.");
As seen earlier, JavaScript could not convert the mixed string to an float value. Thanks to the isNaN() function, however, we avoided problems.
Customizing JavaScript floating numbers format
The parseFloat() method will return the minimum number of digits required to express a floating point number; a later tutorial will deal with financial calculations in JavaScript, but for now let us show you how to force JavaScript to display a certain number of decimals regardless of the floating point value with which you are working. Consider the following code:
// Declare a floating point with 2-digit precision:
var numex = "3.00";
alert( parseFloat( numex ) ); // Returns "3"
The script above will return a "3", and most cases this isn't what you wanted or expected; but JavaScript fortunately offers a built-in function to deal with floating point precision, the toFixed() method. A dedicated tutorial covers toFixed()
in depth, but here is a script that shows you how to represent floating points extracted with parseFloat() with the desired precision:
// String containing the float to extract: (e.g. from a form field)
var numex = "3.2";
// Extract the floating point value with parseFloat()
var numex = parseFloat( numex ); // Variable now contains a float
// Force a double-digit floating point precision:
alert( numex.toFixed(2) ); // Will return "3.20"
In combination with the parseFloat() function, the Number.toFixed()
method gives you full control over how JavaScript will display floating point values!
The toFixed() method returns a string representation of a floating point number - the floating point value extracted with parseFloat() is the actual value, but without representation of insignificant digits.
Test the parseFloat() Function
Interactively test the parseFloat() function by editing the JavaScript code below and clicking the Test parseFloat() function button.
Browser support for JavaScript parseFloat() function | |||
---|---|---|---|