All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Convert String To Number In JavaScript

Last Updated : Jul 1, 2023

How To Convert String To Number In JavaScript

In this article we will show you the solution of how to convert string to number in JavaScript, In JavaScript, if we want to convert a string to number, we must use the function – parseInt().

Let us know about the function.

parseInt(): this function in JavaScript, parses a string and returns an integer.

Syntax: parseInt (value, radix)

Here, set the value as the value we want to convert to a number and radix is the radix or base.

If the parseInt() cannot convert the first character, its returns NaN as Not a Number.

Step By Step Guide On How To Convert String To Number In JavaScript :-

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> how to convert string to number in javascript </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <style>
        h1 {
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        }
    </style>
</head>
<body>
    <center>
        <h1> WELCOME TO TALKERSCODE </h1>
        <h3> how to convert string to number in javascript </h3>
        </center>
    <script>
        var num1 = "10" ;
        var num2 = "20" ;
        var int1 = parseInt(num1) ;
        var int2 = parseInt(num2) ;
        var total = int1+int2 ;
        document.write(total) ;
    </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> to mention the version of the HTML file
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Attach an external CSS file using <link> tag
  5. <h1> tag used to add heading here and also adding the inline CSS here.
  6. Create a <Script> tag to write JavaScript within it.
  7. Create two Variables using var num1 and num2 .
  8. Using parseInt() to convert the integer into string
  9. Create a variable named total to add the integers.
  10. Using document.write() to display the integer.

Example 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> how to convert string to number in javascript </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <style>
        h1 {
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        }
    </style>
</head>
<body>
    <center>
        <h1> WELCOME TO TALKERSCODE </h1>
        <h3>how to convert string to number in javascript </h3>
        </center>
        <input type="text" id="number" placeholder="enter number"/>
        <br>
        <button onclick="getValue()"> Submit </button>
        <h4> Result </h4>
        <p id="output"></p>
    <script>
        function getValue() {
            var n1 = document.getElementById("number").value ;
            var n2 = 10 ;
            document.getElementById("output").innerHTML = parseInt(n1)+n2 ;
        }
    </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> to mention the version of the HTML file
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Attach an external CSS file using <link> tag
  5. <h1> tag used to add heading here and also adding the inline CSS here.
  6. <input> with the id number. And a placeholder enter number.
  7. Now create <button> with onclick getValue()
  8. <p> with the id output to show the result
  9. Create a <Script> tag to write JavaScript within it.
  10. getValue() Function is created.
  11. Document.getElementById() with parseInt() to convert it to integer.

Conclusion :-

At last, here in conclusion, we can say that with this article’s help, we know how to convert strings to number using JavaScript.

I hope this article on how to convert string to number in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.