Let’s suppose you receive from the user of your site some data, in string form, which should be converted to integer before you use them again. For that, you can use the
parseInt() function. But how can you do that exactly, and also reverse this action? Let’s see below.
parseInt() function takes a string and a base in numeral systems (also called radix) as it’s arguments to later parse the string into an integer of the specified radix or NaN (not a number). The syntax goes like this:
The value that will be parsed is the variable
yourString. However, if it happens for it to not be of the type “string” it will be converted to one and then it’s proceeded with the method. If the first character of
yourString is a whitespace, it will be ignored, and proceeded with the next one.
The radix, as we briefly mentioned before is the base of a mathematical numeral system. It may be a number from 2 to 36. It is highly advisable to always specify this parameter to exclude the possibility of confusion and unpredictable behavior of the browser. The most common radix used is the decimal 10.
We mentioned that strings starting with a whitespace will be converted from the next character after it. What about strings ending in a whitespace? It’s also ignored.
parseInt() encounters a character which is not a numeral in the specified radix, it will stop the parsing and return the value calculated up to there. However, if the first character (different from a whitespace) is not a numeral, the function will return
NaN is not a number in any radix for arithmetical purposes, which means that any operation in which it takes part will result in
If the radix is undefined, the function itself assumes it according to the leading characters of the string you’re trying to convert to an integer.There are three main points to remember in this case:
- When the string starts with
0X, the radix is assumed to be hexadecimal (16), and the remainder of the string is parsed.
- When the string starts with
0the radix is assumed to be either octal (8) or decimal (10), depending on the browser. This is also the reason why it is highly recommended to always specify the radix.
- If the string starts with any other character than the cases above, the radix is assumed to be decimal (10).
Let’s see it in action!
Now that you know the general rules according to which
parseInt() operates, let’s see the real examples below. First of is having a floating number as a string:
var a = parseInt("16"); //result: 16 var b = parseInt("16.00"); //result: 16 var c = parseInt("16.11"); //result: 16
All three cases will return
16, because the function encounters the floating point and stops parsing, returning the calculated value up to it. Note that we haven’t specified the radix in any way, so it’s assumed to be decimal (10).
Let’s check out spaces next:
var d = parseInt("16 years"); //result: 16 var e = parseInt("16 11 1994"); //result: 16 var f = parseInt(" 16 "); //result: 16
In this case the result is also 16 in all the cases, but for different reasons. In the first one the parsing has stopped after having encountered a space which is not either leading or ending the string. The same happens regardless of whether that space is followed by a digit or a letter.
However, if the first one would have the format below, it would return
NaN (Not a Number):
var d = parseInt("years 16");
But what happens when the string is an expression or operation with numbers? Take a look:
var g = parseInt("16*3", 10); var h = parseInt("16e2", 10); var j = parseInt("16px", 10);
All the operators are considered characters that stop the parsing, resulting in all three cases returning
Lastly, let’s see how this method operates with different radixes.
var x = parseInt("FXX123", 16); //result: 15 var y = parseInt("1111", 2); //result: 15 var z = parseInt("993", 8); //result NaN
In the first two cases, the strings are equal to 15 in the hexadecimal and binary base respectively. In the second case, since
993 is a number that cannot be of the octal base (since no one-digit number bigger than 7 can be of that radix), so the method returns
NaN, having considered
9 as just a common non-number character.
To do the reversal of
parseInt(), we can use a function with an even simpler usage. It’s syntax goes like this:
It takes the number you want to convert to a string and the radix.
Download the source code
Download the source code for this tutorial:
You can download the full source code of this example here : parseInt