How to convert a string to a floating point number in JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to discuss how to convert a string to a floating-point number in JavaScript. We can convert a string to a floating point in three ways −

Using the parseFloat() method.
Using the parseInt() method.
Using type conversion.

Using the parseFloat() method

The parseFloat() is a function in JavaScript, this accept the string as input and convert the value into a floating point number.

Let’s consider a scenario where there is numeral value in the string and also if the first character of the string is not a number then the resultant output will be NaN, this means the input is not a number. Following is the syntax of this method −

parseFloat(value)

Note − The parseFloat() will return the output as floating point number. If in case the, first character of input variable cannot be converted into number, then it will result the output as NaN.

Example 1

In the example below we are performing parseFloat() function on input string which contains spaces as first character.

This function will ignore the spaces and returns the output as floating point number. And in the second input we’ve given spaces and the first character of string is not a number, thus it returns NaN.


<!DOCTYPE html>
<html>
   <title>parseFloat() function in JavaScript</title>
<head>
   <script>
      function ex1() {
         let a = parseFloat(" 400 ");
         document.write("The floating point number of the string will be: " + a + "<br>");
         let b = parseFloat(" Nikhilesh ");
         document.write("The floating point number of the string will be: " + b);
      }
      ex1()
   </script>
</head>
<body>
</body>
</html>

Example 2

The following example below, we are performing parseFloat() function on an input value which is having a decimal value in it.

The function will return the output with decimals as it is in the input value. Because the input value starts with a number.


<!DOCTYPE html>
<html>
   <title>parseFloat() function in JavaScript</title>
<head>
   <script>
      function ex2() {
         let a = parseFloat("183.1745");
         document.write('The floating point number of the string will be: ' + a);
      }
      ex2()
   </script>
</head>
<body>
</body>
</html>

Example 3

In this example below, we are using parseFloat() to print the floating point number of the string. In this case below, we have two inputs values, one is "Nikhil007" and another is "007Jamesbond".

The input value which is having number as first character will return the output and other which is not having number as first character will return NaN.


<!DOCTYPE html>
<html>
   <title>parseFloat() function in JavaScript</title>
<head>
   <script>
      function ex3() {
         let a = parseFloat("Nikhil007");
         document.write("when number is not first character : " + a +"<br>");
         let b = parseFloat("007Jamesbond");
         document.write("when number is first character : " + b);
      }
      ex3()
   </script>
</head>
<body>
</body>
</html>

Using the parseInt() method

The parseInt() function is almost equal to the parseFloat() function. ParseInt() will only return integers.

This function will not deal with decimals and returns the value before the decimal point and first integers. These will be discussed in below examples.

Example 1

In this example below, we have used parseInt() function. We have several examples mentioned in the below code.


<!DOCTYPE html>
<html>
<body>
   <h2>The parseInt() Method</h2>
   <p>parseInt() parses a string and returns the first integer:</p>
   <script>
      function parse_Int() {
         let a = parseInt(" 18 ");
         document.write(a + "<br>");
         let b = parseInt("18.00");
         document.write(b + "<br>");
         let c = parseInt("18.33");
         document.write(c + "<br>");
         let d = parseInt("18 10 7");
         document.write(d + "<br>");
         let e = parseInt(" 45 ");
         document.write(e + "<br>");
         let f = parseInt("45 inches");
         document.write(f + "<br>");
         let g = parseInt("she was 99");
         document.write(g + "<br>");
      }
      parse_Int()
   </script>
</body>
</html>