The JavaScript parseInt function is a built-in method of JavaScript Programming Language that used for parsing strings into integer values. It’s an essential part of the Number type and can be used on both primitive types or objects that contain a valueOf method. The return result will always be between -1 and +1 inclusive.
In this tutorial we’ll look at how it works internally, its usage in different scenarios and some examples using different data types.
This function contains two parameter values.
- String
- Radix
Table of Contents
Basic Syntax
parseInt(string, radix); The string argument is a value that the user wants to convert into an Integer. And radix argument is a number that represents the numeral system; its value lies between 2 and 36. The radix is an optional parameter.
What does JavaScript parseInt() Function Return?
It returns a number that is converted from the original string. And it also returns NaN (Not a Number) in two conditions. The first condition is when the user provides a radix with a value less than 2 or greater than 36.
And the second condition is when it cannot convert the first character, or the first character is non-whitespace.
How to Use JavaScript parseInt() Function?
By putting parameters into the function, we discussed above. We need to provide a string parameter and radix parameter. We discussed that the radix parameter is optional, so what value will it assume by default if we do not provide it a radix value?
It will take the value as 16 if the string starts from 0x or 0X, 8 if the string starts from 0, And the value as 10 for all the other values.
Let’s have a look at different examples.
Example# 01
In this example, we’ll initialize a variable and call the parseInt() function passing a numeric string. And it will return us an integer value.
Code
<!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>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
str = parseInt("75");
document.getElementById("demo").innerHTML = "parseInt('75') = " + str;
</script>
</body>
</html> Output
Example# 02
In this decimal example, we’ll initialize variables and call the parseInt() function, passing different floating number values in string format. And will also return integer values.
Code
<!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>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
str1 = parseInt("75.00");
str2 = parseInt("75.16");
str3 = parseInt("75.75");
document.getElementById("demo").innerHTML = "parseInt('75.00') = " + str1
+ ", " + "parseInt('75.16') = " + str2 + ", " + "parseInt('75.75') = " + str3;
</script>
</body>
</html> Output
Example# 03
Code
<!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>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
str1 = parseInt("75 00 16");
document.getElementById("demo").innerHTML = "parseInt('75 00 16') = " + str1;
</script>
</body>
</html> Output
Example# 04
In this example, we’ll initialize a variable and call the parseInt() function passing simple number value with string input whole in string format.
And it will return the number value in integer form if the string parameter is starting from the number, or else if the string parameter is starting from the string value, it will return NaN.
Code
<!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>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
str1 = parseInt("75 roll");
str2 = parseInt("roll 75");
document.getElementById("demo").innerHTML = "parseInt('75 roll') = " + str1
+ ", " + "parseInt('roll 75') = " + str2;
</script>
</body>
</html> Output
Example# 05
Code
<!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>Document</title>
</head>
<body>
<p id="demo"></p>
<p id="demo2"></p>
<script>
str1 = parseInt("20", 20);
str2 = parseInt("010");
str3 = parseInt("20", 7);
str4 = parseInt("0x10");
str5 = parseInt("10", 17);
str6 = parseInt("F", 16);
str7 = parseInt("0xA", 16);
document.getElementById("demo").innerHTML = "parseInt('20', 20) = " +
str1 + ", parseInt('010')" + str2 + ", parseInt('20', 7) = " + str3 +
", parseInt('0x10') = " + str4;
document.getElementById("demo2").innerHTML = "parseInt('10', 17) = " + str5 +
", parseInt('F', 16) = " + str6 + ", parseInt('0xA', 16) = " + str7;
</script>
</body>
</html> Output
Conclusion
In this article we had discussion on JavaScript parseInt() built-in function. The parseInt method is one of the built-in methods. It converts string type into an integer and it passes two parameters in it, String and Radix.
The string is the value we wanted to convert, and radix is the numeral system number value between 2 and 36. And we also saw different code examples in different scenarios.
