Using parseInt() - the Interesting Facts

<--------------------------------From Mozilla Developer Network(MDN)------------------------------------->

Summary

The parseInt() function parses a string argument and returns an integer of the specified radix or base.

Syntax

parseInt(string, radix);

Parameters

string

      The value to parse. If string is not a string, then it is converted to one. Leading whitespace in the string is ignored.

radix

      An integer that represents the radix of the above mentioned string. Always specify this parameter to eliminate reader confusion and to guarantee predictable behavior. Different implementations produce different results when a radix is not specified.

<-------------------------------------------------------------------------------------------------------------------------------->

Ok, the documentation shown above has provided the basic information we need to know about parseInt(). Now we are going to explore this function by reading example codes!

// Example 1
parseInt( "015", 10 );
parseInt( "    F", 16 );
parseInt( "0xF", 16 );
parseInt( " 017", 8 );

In this example, can you guess what the expressions above return? If you are smart enough, you would find out that all of them return 15! Why? The strings look so much different from each other! Okay, we can get the following rules from the example above:

Rule#1: Leading whitespace in the string is ignored.

Also note that "0x" and "0" is a prefix of hexdecimal number and octal number respectively in JavaScript. However, "015" as a string can represent 15 if we specify that is is a decimal number in the parseInt() function. If the parameter radix is not provide, the number result is unpredictable, as different brower may have different assumptions. ECMAScript 5 specifies that radix=10 should be used when the radix is unclear but the standard may not be supported in all situations. As a result, it is always a good habit to use parseInt() with a radix argument.

// Example 2
parseInt( "0xF", 10 );
parseInt( "15px", 10 );
parseInt( "5*3", 10 );
parseInt( "Friend", 16 );

How about this example? Isn't it confusing? Let me explain the statements one by one. For "0xF", we just saw that it returns 16 when radix=16. However, when radix=10, the parseInt() function does not know what 'x' is. It would ignore that character as well as all subsequent characters and return the integer parsed up to that moment. You can try alert(parseInt("0x5",10)); and justify the reasoning above! With the same reasoning, we know that the following three expressions return 15, 5 and 15 respectively.

Rule#2: When parseInt() encounters the first character that is not a valid numeral at that radix, it ignore the character and all subsequent characters.

Wait for a moment! What if we modify the last expression to parseInt( "Friend", 10 )? The first character 'F' is not valid in decimal integer. So what would be returned? Nothing? Undefined? NO! It returnsNaN. (not a number) To know more about NaN, you can read about the isNaN function.

Okay, the most tricky one comes:

// Example 3
parseInt( 3.14, 10 );
parseInt( 021, 8 );

What do the two expressions above return? Oh, what? The first argument is not a string!

This may be easier than you think. The first one is trivial. The number 3.14 is first converted to a string "3.14" and then passed into the function. Since '.' is not valid in decimal integer, ".14" is ignored and the expression returns 3. Do the second one returns 2*8+1=17? No, it doesn't! Since 021 is treated as a octal number in JavaScript, 021 is converted to "17". (Actually, if you try 021=="17" or 021==17, they both return true!) No we can easily convert this "17" from radix=8 to 10, thus, it returns 15.

To be honest, I am just a novice in JavaScript. I discovered the interesting facts above in the morning and would like to share them with all of you. :) If you have any questions or comments, feel free to reply here or send me an email!