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.
Syntax
The 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:
parseInt(yourString, radix);
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.
More rules
This function needs some extra data to make the accurate conversion, and in order to simplify the matters, Javascript has some internal rules when using it, to avoid the need for multiple specifications. More explicitely, these rules apply for whitespaces, not-numerals and undefined radixes. Take a look!
Whitespaces
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.
Not numerals
If 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.
Note: NaN is not a number in any radix for arithmetical purposes, which means that any operation in which it takes part will result in NaN.
Undefined radixes
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
0xor0X, 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!
Usage
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 16.
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.
Reversing parseInt()
To do the reversal of parseInt(), we can use a function with an even simpler usage. It’s syntax goes like this:
myInteger.toString(radix)
It takes the number you want to convert to a string and the radix.
Download the source code
This was an example of parseInt in Javascript.
Download the source code for this tutorial:
You can download the full source code of this example here : parseInt
