1. Number Conversion in JavaScript
In JavaScript, a variable can hold any data type. Sometimes, we need to convert the string representation of a number to an integer or float. For example, data submitted by web form comes in string format, even user entered the data in number format. We can say an age submitted by the user comes as a string. JavaScript, need to convert this as a number. Once data is converted to a number, it can involve in mathematical expressions.
2. Need for Conversion
Now, look at the code snippet below. Here, we ask the user to provide two numbers and collected those in the variables N1 and N2. The values returned by the
prompt function is a string and hance we have strings in the variable N1 and N2. For example, let us say the user responded to the first prompt with a value of 10 and for the second prompt with the value of 12. Even though the user responded with numbers, the variables hold these numbers in string format like “10” and “12”.
Next, we added the content of the variables N1 and N2 via the expression N1 + N2. JavaScript thinks it as a String Join and stores the outcome as “1012” in the variable Result.
3. Number Conversion – JavaScript parseInt
To make the above example work the expected way, we need to convert the string representation of number to a number so that we can use it in the arithmetic operation. JavaScript’s
parseInt method will perform the conversion. If you want to convert the number into a float, you can use
parseFloat. Below picture shows the parseInt syntax:
In the above picture you can see N1 passed in is a string form of the number. Second param tells, the converted number should be in base 10 form. If you specify 2 here, the converted number will be in the binary form. Note how the variable N1 is used to store a string and a number. When it is passed as a param, it has number in string format. After the parseInt, the return value, which is a number, is stored in the same variable, N1.
Now look at the below code:
Here, we used
parseInt method to convert the numbers N1 and N2. Note, the converted numbers stored back in the same variables. Now, the arithmetic operation is performed on two numbers and hence we will get the result 10 + 12 = 22.
4. NaN & parseInt
In JavaScript NaN stands for “Not a Number”. Say, for example, the string “127” is a number. But the string “Hi” is Not A Number (NaN). You can easily check this with a function call isNaN(strParam). The function returns false when the string strParam is a number. Now look at the below code:
Explanation
- We pass the string form of number to the function isNaN. This function returns false when the string is a number.
- In the else portion we try the conversion via
parseInt, and it will be safe as N1 is really a number. When we pass a string which is not a number, the
parseIntfunction will returnNaN.
5. Code Reference
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <title>Number Conversion</title> </head> <body> <script> //Sample 01: Let us get Numbers From User var N1 = prompt("Enter Number 1:"); var N2 = prompt("Enter Number 2:"); Result = N1 + N2; document.writeln("Result = " + Result + "<br/>"); //Sample 02: Let us Make the Correction N1 = parseInt(N1, 10); N2 = parseInt(N2, 10); Result = N1 + N2; document.writeln("Result = " + Result + "<br/>"); //Sample 03: Check to See Conversion is Valid if (isNaN(N1)) N1 = 0; else N1 = parseInt(N1, 10); if (isNaN(N2)) N2 = 0; else N2 = parseInt(N1, 10); Result = N1 + N2; document.writeln("Result = " + Result + "<br/>"); </script> </body> </html> |
Output of running the code is below:
Categories: JavaScript
Tags: isNaN, parseFloat, parseInt, prompt
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.