How To Convert String To Number In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
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>
- First, we write <! DOCTYPE html> to mention the version of the HTML file
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Attach an external CSS file using <link> tag
- <h1> tag used to add heading here and also adding the inline CSS here.
- Create a <Script> tag to write JavaScript within it.
- Create two Variables using var num1 and num2 .
- Using parseInt() to convert the integer into string
- Create a variable named total to add the integers.
- 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>
- First, we write <! DOCTYPE html> to mention the version of the HTML file
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Attach an external CSS file using <link> tag
- <h1> tag used to add heading here and also adding the inline CSS here.
- <input> with the id number. And a placeholder enter number.
- Now create <button> with onclick getValue()
- <p> with the id output to show the result
- Create a <Script> tag to write JavaScript within it.
- getValue() Function is created.
- 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.
About Amruta
