parseFloat Javascript

Parameters

parseFloat method accepts a string as an input to be parsed. If we give the method another parameter, the parameter will be ignored. 

Below is the example for better illustration: 

• JS

JS

// declaring variable to store numeric string
let str="3.14";

// passing unnecessary parameters
let num=parseFloat(str,10);
 
// displaying the output
console.log(num);  

You can also try this code with Online Javascript Compiler

Run Code

Output

Description

Here, "str" has a value of 3.14. "str" and another value ", 10", are passed as a second parameter. parseFloat method will ignore "10". As we can see, when the variable "num" is console logged, the output turns out to be "3.14", which was in the variable "num", and the second parameter was ignored.

Return Type

The parseFloat method changes a string into a floating-point number. The return type will be a number. It will return "NaN" if the parameter is invalid, which is not a number. Below is the example for illustration:

// declaring variable to store non-numeric string
let str="not a number";

// applying parseFloat method
let num=parseFloat(str);

// displaying the result
console.log(num);  
console.log(typeof num); 

You can also try this code with Online Javascript Compiler

Run Code

Output 

Description

The parseFloat method does not support the above string str. It will give the output as "NaN".

Importance

parseFloat Javascript has several importance, which are given below -

• It frequently happens in JavaScript programming that we must convert a string to its matching Number. For instance, changing the text "6.89" to the integer format of 6.89. Because JavaScript is used for client-side web development, these situations do happen.
   
• We have to deal with data forms submitted by users while doing client-side web programming. The data that comes from the form is generally in string format.
   
• Even the information from numerical form fields, such as age, rating, etc., is in a string rather than a number format. So that more data processing can occur, it is necessary to convert such data into a number format. 

Application

Since JavaScript is employed on the client side, there is a significant chance that numerical data from the form fields - such as currency amount, metric, etc.- is collected from the user in string format. Therefore, we must first transform the data into number format to get that numeric string data directly on the client side. We also provide data to the server side, where conversion is also necessary. Thus parseFloat Javascript method may be used in client-side and server-side web programming.

Here are some examples explaining the applications of the parseFloat method in Javascript:

Parsing a Numeric String to a Floating-Point Number

Let's look at a normal example of converting a simple string into a floating point number.

Code

• JS

JS

// declaring a variable for storing a string value
let ninjaString = "3.14159";

// applying parseFloat method
let num = parseFloat(ninjaString);
console.log(num);

You can also try this code with Online Javascript Compiler

Run Code

Output

Description

Here, the parseFloat method converts the string "3.14159" to a floating-point number, which is stored as "num". Then console.log() method provides the output of "num" that is 3.14159. 

Parsing a String with Leading Whitespace to a Floating-point Number

Here is an example of a string with leading spaces in front of the number.

Code

• JS

JS

// declaring a variable to store numeric string with leading whitespace
let ninjaString = "    3.14";

// applying parseFloat method
let num = parseFloat(ninjaString);
console.log(num);

You can also try this code with Online Javascript Compiler

Run Code

Output

Description

The parseFloat automatically trims the leading whitespace of ninjaString before parsing the string.

Parsing a String with Trailing Non-Numeric Characters to a Floating-Point Number

Now, Let us look at what happens when non-numeric values are concatenated with numerical values.

Code

• JS

JS

// declaring variable to store numeric string having trailing non-numeric characters
let ninjaString = "3.14abc";

// applying parseFloat method
let num = parseFloat(ninjaString);
console.log(num);

You can also try this code with Online Javascript Compiler

Run Code

Output

Description

Since ninjaString also contains alphabets at the end. parseFloat method will remove the non-numeric values. The output will be "3.14".

Parsing a String with Both Leading and Trailing Non-Numeric Characters to a Floating-Point Number

Like the above example, we have the input with non-numeric values on both sides.

Code

• JS

JS

/* declaring variable to store non-numeric string having trailing and leading characters */
let ninjaString = "abc3.14xyz";

// applying parseFloat method
let num = parseFloat(ninjaString);
console.log(num);

You can also try this code with Online Javascript Compiler

Run Code

Output

Description

Here, the input string has non-numeric values on both sides. parseFloat method will not recognize the string since non-numeric values are before the numeric values.  

Parsing a String with a Comma Separator to a Floating-Point Number

Now look at this example which contains commas in the input string.

Code

• JS

JS

// declaring variable to store numeric string separated by commas
let ninjaString = "1,000.5";

// applying parseFloat method
let num = parseFloat(ninjaString.replace(',', '.'));
console.log(num);

You can also try this code with Online Javascript Compiler

Run Code

Output

Description

Here, in the string "1,000.5", a comma is used. But the parseFloat method needs a dot as the decimal separator. Therefore we use replace() method to replace the comma with a dot, and the result is then parsed to parseFloat, giving a floating point number as the output.

Examples

Determining whether the input string is a floating digit or character using isNaN.

Code

• JS

JS

// storing numeric string in variable
var x = parseFloat("3.45"); //parsed value is stored in x

// checks if the value of x is “NaN”
if (isNaN(x))       
   console.log("x is not a number" + "<br>");
else
   console.log("x is a number" + "<br>");
 
// parsed string is stored in y
var y = parseFloat("CodingNinja");    
 
// checks if the value of y is “NaN”
if (isNaN(y)) 
    console.log("y is not a number" + "<br>");
else
    console.log("y is a number" + "<br>");

You can also try this code with Online Javascript Compiler

Run Code

Output

Using extra large numbers or extra small numbers with scientific notation.

Code

• JS

JS

// input with scientific notation
var x = parseFloat("432e-4"); 

// input with scientific notation
var y = parseFloat("432e9");

// printing output
console.log('Using parseFloat("432e-4") = ' + x + "<br>");
console.log('Using parseFloat("432e9") = ' + y + "<br>");

You can also try this code with Online Javascript Compiler

Run Code

Output

If two decimals are present in the numerical input string, the second decimal is invalid, and the parseFloat method converts the string to that position. String 44.45.32 will be parsed to 44.45.

Code

//string with 2 decimal
console.log(parseFloat( "44.45.32" ) + "</br>" ); 

Output

Demonstration Using Number.parseFloat(strng_value).

Code

• JS

JS

// using string as simple integer
var a="25"; 

// using string as floating point number
var b="25.75"  

// using string as string
var c="Coding Ninja"; 

// combining string and integer
var d="25Ninjas"; 

// combining string and floating-point number
var e="25.75Ninjas";  

// displaying the output
console.log(Number.parseFloat(a)+"<br>");
console.log(Number.parseFloat(b)+"<br>");
console.log(Number.parseFloat(c)+"<br>");
console.log(Number.parseFloat(d)+"<br>");
console.log(Number.parseFloat(e));

You can also try this code with Online Javascript Compiler

Run Code

Output

Demonstration of before parsing and after parsing the value.

Code

• JS

JS

// initializing the values
var a="10.67";  
var b="23.51";
var c=a+b; 

//Value of c without using parseFloat:
console.log("Before invoking parseFloat(): "+c+"<br>"); 

//Value of c after using parseFloat; 
var c=Number.parseFloat(a)+Number.parseFloat(b);

// displaying the output
console.log("After invoking parseFloat(): "+c);

You can also try this code with Online Javascript Compiler

Run Code

Output

Comparison of parseFloat() and parseInt()

Below is a comparison between the two most common string conversion methods. One is the parseFloat Javascript method, and the other is the parseInt Javascript method -

Frequently Asked Questions

What is parseFloat in JavaScript?

parseFloat in JavaScript converts a string into a floating-point number, parsing until it encounters a non-numeric character.

What is the purpose of the parseInt() and parseFloat() methods?

parseInt() converts a string to an integer, while parseFloat() converts a string to a floating-point number, both handling numerical values in strings.

Why do we use parseFloat?

We use parseFloat to convert a string containing a decimal number into a floating-point value, useful for mathematical operations involving decimals.

Conclusion

In this article, we discussed the parseFloat Javascript method. We went through their Applications, Importance and some Examples. We learned their comparison with their alternatives. We hope you enjoyed this article.

You can visit our other related blogs for more information on these topics.

• parseint() Function in JavaScript
• Javascript Interview Questions | Part 1
• How to convert string to number in Javascript?
• Importance of JavaScript to Web Programming
• Client-Server Model 

You may refer to our Guided Path on Code360 to enhance your skill set on DSA, Competitive Programming, System Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!