How to Convert String to Number in JavaScript

JavaScript provides various methods to convert a string into a number. Let’s turn to their discussion bellow:

1. How to Convert a String into Point Number

Use parseFloat() function, which purses a string and returns a floating point number. The argument of parseFloat must be a string or a string expression. The result of parseFloat is the number whose decimal representation was contained in that string (or the number found at the beginning of the string).

If your string is "384.75a" the result will be 384.75.

Example

<!DOCTYPE html>
<html>
   <body>
      <p>Click the button to parse the string.</p>
      <button onclick="myFunction()">Click</button>
      <p id="demo"></p>
      <script>
         function myFunction() {
            var myString = parseFloat("384.75a") + "<br>";
         var pointNum = myString + "<br>";
         document.getElementById("demo").innerHTML = pointNum;
         }
      </script>
   </body>
</html>
COPY TO CLIPBOARD

If the string argument cannot be parsed as a number, the result will be NaN (not-a-number value).

var myString = parseFloat("John is 20")+"<br>";

2. How to Convert a String into an Integer

Use parseInt() function, which parses a string and returns an integer.

The first argument of parseInt must be a string. parseInt will return an integer found in the beginning of the string. Remember, that only the first number in the string will be returned.

For example when we have the string “384.75a” and we want to convert it to a number, the result will be 384.

Example

<!DOCTYPE html>
<html>
   <body>
      <p>Click the button to parse the string.</p>
      <button onclick="myFunction()">Click</button>
      <p id="demo"></p>
      <script>
         function myFunction() {
         var myString = parseInt("384.75a")+"<br>";
         var number = myString + "<br>" ;
         document.getElementById("demo").innerHTML = number;
         }
      </script>
   </body>
</html>

The second argument is radix, it specifies the base of the number whose string representation is contained in the string. The radix, argument can be any integer from 2 to 36. Remember that radix is separated from the string by a comma.

Let’s consider you have the string "77.22", and you set the radix 16. The result will be 119 (= 7 + 7*16).

var myString = parseInt("77.22", 16)+"<br>";

Strings beginning with 0x or -0x radix are parsed as hexadecimals(the radix is 16) . If you have “0x77” string, the result will be 119 (= 7 + 7*16).

var myString = parseInt(“0x77”)  + "<br>" ;

Strings beginning with 0 or -0 are parsed as octal numbers. If you have the string “-077” the result will be -77.

var myString = parseInt(“-077”)  + "<br>" ;

If the first argument cannot be converted to an integer, the result will be NaN (or 0 in very old browsers such as Internet Explorer 3.0).

var myString = parseInt(“John is 20”)  + "<br>" ;
Note: Despite parseFloat() function, in parseInt() only the first component in the string will return, i.e. if you have 35.22 only 35 will return.

3. How to Convert a String into a Number

Use Number() function, which converts the object argument to a number that represents the object's value.

Example

<!DOCTYPE html>
<html>
   <body>
      <p>Click the button to parse the string.</p>
      <button onclick="myFunction()">Click</button>
      <p id="demo"></p>
      <script>
         function myFunction() {
         var myString = Number("384.75")+"<br>";
         var Num = myString + "<br>" ;
         document.getElementById("demo").innerHTML = Num;
         }
      </script>
   </body>
</html>

The given example will return 384.75

Note: Despite parseFloat() and parseInt(), Number() function returns NaN if the string contains any text.

4. How to Use + Before a String

Use +

One trick is to use + before the string:

Example

<!DOCTYPE html>
<html>
   <body>
      <p>Click the button to parse the string.</p>
      <button onclick="myFunction()">Click</button>
      <p id="demo"></p>
      <script>
         function myFunction() {
         var myString = +("384.75")+"<br>";
         var number = myString + "<br>" ;
         document.getElementById("demo").innerHTML = number;
         }
      </script>
   </body>
</html>

The result of the above-mentioned example will be 384.75.

Note: If you put a comma (,) instead of a dot (.) the result will be NaN, because the string will not be a number.

5. How to Use * 1 After a String

Use * 1 after the string

This is one of the fastest options, it is similar to the + unary operator. It does not perform conversion to an integer if the number is a float.

Example

<!DOCTYPE html>
<html>
   <body>
      <p>Click the button to parse the string.</p>
      <button onclick="myFunction()">Click</button>
      <p id="demo"></p>
      <script>
         function myFunction() {
         var myString = ("38") * 1 + "<br>";
         var number = myString + "<br>" ;
         document.getElementById("demo").innerHTML = number;
         }
      </script>
   </body>
</html>
The result will be 38.
Recommendation: If you change the number 1 into any other number, it will multiply the number of the string. If you put 0, the result will be 0.
Note: If you add any text to the string, it will return NaN.

Do you find this helpful?

Related articles