Users can use functions in JavaScript to convert a string into an integer. There are many ways to convert a string into an integer value. One is by using JavaScript functions like Number(), parseFloat(), parseInt().
The other techniques like unary plus operator, bitwise NOT operator, etc., can also convert string input into an integer value. This article will discuss how users can convert a JavaScript string into an integer value.
What is parseInt() in JavaScript?
In JavaScript, users use the parseInt() to give input as strings and radix parameters and convert that input into an integer. parseInt() is a function that converts the string input into an integer value. After users run their code, the parseInt() function returns an integer of a base which the second parameter specifies in the parseInt() function.
Users can use the radix parameter to define which numeral system they will use in their code.
If users do not add any numeric value to the string input, it returns NaN, i.e., not a number. Users can use the radix parameter to specify which numeral system they will use in their code. An example to illustrate the function of the radix parameter - a radix parameter of sixteen signifies that the interpreter should parse the number in the string from a hexadecimal number to a decimal number.
Syntax:
parseInt(Value, radix)
This function takes two parameters. These are:
Value:
This parameter includes a string input, which the user will convert into an integer value.
Radix:
This parameter signifies the base or radix the user will input as a parameter, but it is optional.
1. Convert a string into an integer using the parseInt():
Code Snippet:
<html>
<body>
<script>
var A = "1";
var B = parseInt(A);
document.write(" The value is " + B);
var C = parseInt("111-0-111");
document.write("</br>");
document.write(" The value is " + C);
document.write("</br>");
var D = "Hello";
var E = parseInt("20 Hello");
document.write("value is " + E);
document.write("</br>");
var F = parseInt(D);
document.write(" The value is " + F);
</script>
</body>
</html>
Explanation:
In this code snippet, we have used the parseInt() function to convert the string written within double quotes. The last variable, i.e., var F, signifies that we have not used any integer within the double-quotes. So, it returns a NaN (not a number). The second last variable (var E) returns only the integer part of the string, i.e., 20.
Output:
What is Number() in JavaScript?
Users can use this function to convert a value of other types to numbers using the Number() function. It implies it can depict fractional values, but there are a few limitations to what it can store.
Syntax:
Number(object)
This function has a single parameter.
Object:
This parameter holds the objects of any data type the users want to convert into a number type.
2. Using Number():
Code Snippet:
const demo1 = "12";
document.write('Variable is: ' + typeof demo1);
Number(demo1)
document.write('<br>After converting to integer: ' + Number(demo1));
const demo2 = "Hello"
console.log(Number(demo2));
document.write('<br>After converting to integer: ' + Number(demo2));
Explanation:
In this code snippet, first, we have used a string called "demo" with an integer value. It returns the type of input as a string. Secondly, we have used the Number() function that converts the input string into an integer, i.e., it returns 10 in the console.
But when we used the string input "Hello" in the last variable (demo2), the output is "NaN," which represents it has no number input. It is because we have not used any numeral value inside the string input or the string's first character has no number.
Output:
What is parseFloat() in JavaScript?
Similar to the above JavaScript functions, the parseFloat() is a function that accepts a string input and converts it into a floating-point number. If the string input does not have a numeral value or the string's first character is not a numeral value, it returns NaN, i.e., not a number.
Syntax:
parseFloat(value)
This function has a single parameter.
Value:
This parameter accepts a string. It converts the string input into an integer or a floating-point number (based on the string data type).
3. Using parseFloat():
Code Snippet:
<script>
const demo1 = "12";
console.log(parseFloat(demo1));
document.write('<br>After converting "12" to integer: ' + parseFloat(demo1));
const demo2 = "12Hello";
console.log(parseFloat(demo2));
document.write('<br>After converting "12Hello" to integer: ' + parseFloat(demo2));
const demo3 = "F12";
console.log(parseFloat(demo3));
document.write('<br>After converting "F12" to integer: ' + parseFloat(demo3));
</script>
Explanation:
In the above code snippet, we have used three variables with three different scenarios. The first variable (demo1) contains a string input with a value of 12 and returns 12 as output. In the second, we used a string input having a number as the first character and returning the same numeral value input.
But when we used a non-numeral value in the last variable (demo3), the console displayed the output as NaN.
Output:
4. Using the unary plus operator (+) –
<script>
const demo1 = "12";
console.log(+demo1);
document.write('<br>After converting "12" to integer: ' + +demo1);
const demo2 = "awesome";
console.log(+demo2);
document.write('<br>After converting "awesome" to integer: ' + +demo2);
</script>
Explanation:
The unary plus operator converts the string input into an integer. Users need to place the operator before the operand.
Output:
5. By multiplying the string by the number 1:
<script>
const demo1 = "10";
document.write('<br>After converting "12" to integer: ' + demo1 * 1);
console.log(demo1 * 1);
const demo2 = "Hello";
document.write('<br>After converting "12" to integer: ' + demo2 * 1);
console.log(demo2 * 1);
</script>
Explanation:
Here, we are multiplying a string input with a number. The interpreter will convert the string value into a number and perform that mathematical operation. If the JavaScript interpreter cannot convert the string into a number, then the mathematical operation will not work and will return NaN.
Output:
6. By divide the string by the number 1:
<script>
const demo1 = "10";
document.write('<br>After converting "12" to integer: ' + demo1 / 1);
const demo2 = "Hello";
document.write('<br>After converting "12" to integer: ' + demo2 / 1);
</script>
Explanation:
Here, we are dividing a string input with a number. The interpreter will convert the string value into a number and perform that division operation. If the JavaScript interpreter cannot convert the string into a number, then the mathematical operation will not work and will return NaN.
Output:
7. By subtracting the number 0 from the string:
<script>
const demo1 = "10";
document.write(demo1 - 0);
</script>
Explanation:
In the above method, we subtract the string input from 0 and get the required output.
Output:
8. Using the bitwise NOT operator (~):
<script>
const demo1 = "16";
document.write('<br>After converting "16" to integer: ' + ~~demo1);
const demo2 = "awesome";
document.write('<br>After converting "awesome" to integer: ' + ~~demo2);
</script>
Explanation:
Here, we are using a bitwise NOT operator (~). This operator will invert the operand's bits and convert that value to a 32-bit signed integer. If we apply one bitwise NOT operator (~) on the input number, it will execute the -(x + 1) operation. And, when we use two bitwise NOT operators (~), it will convert the string input into a number.
Output:
9. Using the Math.floor() function:
<script>
const demo1 = "13.4";
document.write('<br>After converting "13.4" to integer: ' + Math.floor(demo1));
const demo2 = "awesome";
document.write('<br>After converting "awesome" to integer: ' + Math.floor(demo2));
</script>
Explanation:
Another way to convert the string input into an integer is to use the Math.floor() function. It will round the input string containing a number down to the nearest greatest integer.
Output:
10. Using the Math.ceil() function:
<script>
const quantity = "2.79";
console.log(Math.ceil(quantity));
document.write('<br>After converting "awesome" to integer: ' + Math.ceil(quantity));
</script>
Explanation:
The function will round the string input having a number to the nearest greatest integer.
Output:
11. Using the Math.round() function:
<script>
const quantity = "9.4";
console.log(Math.round(quantity));
document.write('<br>After converting "awesome" to integer: ' + Math.round(quantity));
</script>
Explanation:
The Math.round() function will round the string input with an integer value to the nearest integer.
Output:
Conclusion:
This article caters to eleven different methods of converting a string input into an integer. It is up to the user to decide which one they choose for improving the performance and readability or balance between both.