了解Javascript函数：parseInt()

前些天在使用parseInt()函数时，遇到某些转换时总是不能快速一次性给出答案，索性就研究一番，避免以后再次使用时又得想来想去的。

定义

1、w3school：

parseInt() 函数可解析一个字符串，并返回一个整数。

链接：http://www.w3school.com.cn/js/jsref_parseInt.asp

　　　http://www.w3school.com.cn/js/pro_js_typeconversion.asp　

2、mozilla开发者

Parses a string argument and returns an integer of the specified radix or base.

链接：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt

其中对浏览器的差异性值得大家注意

解析

 根据上述官方解释， parseInt(string, radix)

 函数有两个调用方式

 1、指定radix，这也是推荐的方式，很不幸我之前都不是这样做的

 2、不指定radix，即：parseInt(string)。虽然简单，但规则很多，这也是本文阐述内容的核心。 

parseInt(string, radix)

radix，表示转换的基数，也就是我们常说的2进制、8进制、10进制、16进制等。范围从2~36，但我们在JS中一般调用该方法时，基本都是以10为基数进行转换的。

如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

“string”参数应用的详细规则如下

（以基数10作为示例，原因是在实际使用时，出现频率最高。而其它基数的使用，你还需要很清楚各进制之间的转换，这个应该是计算机专业的重点课程，如果忘记了，那使用这个方法就会很“难受”）：

1）如果都是字母，返回：NaN，例：

    <script type="text/javascript">
        window.onload = function testParse() {
            alert(parseInt("abc", 10));
        }
    </script>

2）如果都不是字母，返回：123，例：

    <script type="text/javascript">
        window.onload = function testParse() {
            alert(parseInt("123", 10));
        }
    </script>

 3）如果字母和数字都存在，例：

    <script type="text/javascript">
        window.onload = function testParse() {
            alert(parseInt("1x2bc", 10));
            alert(parseInt("df2bc", 10)); 
        }
    </script>

parseInt("1x2bc", 10)返回：1

parseInt("df2bc", 10)返回：NaN

这里涉及到两个规则:

3.1）如果参数“string”，以数字开头，则取截止到第一个字母出现之前的所有数字进行转换（NND，总是感觉描述不到位）。

       上例中，第一个出现的字母是‘x’,取之前的数字串，只有一个数字'1'，结果就返回1

3.2）如果参数“string”，以字母开头，直接返回NaN（因为10进制中字母不是一个有效的的表示，若radix为16呢？结果大家可以自行运行。）

以上描述按照ECMAScript的解释（官方翻译，很给力）：

parseInt() 方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符之前的字符串转换成数字。

 parseInt(string,radix)就介绍到这，如果有不对或者遗漏的，请看官们补充，在此谢过了

parseInt(string)

 以这种方式调用该函数时，因为没有显示的指定radix，会存在很多“潜规则”

 下面是两段引用

 w3school

 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

举例，如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

 mozilla开发者

• If the input string begins with "0x" or "0X", radix is 16 (hexadecimal) and the remainder of the string is parsed.
• If the input string begins with "0", radix is eight (octal) or 10 (decimal).  Exactly which radix is chosen is implementation-dependent.  ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet.  For this reason always specify a radix when using parseInt.
• If the input string begins with any other value, the radix is 10 (decimal).

If the first character cannot be converted to a number, parseInt returns NaN.

  下面来以示例解释上面的内容

 1）如果参数“string”，以"0x" or "0X"开头，基数就默认为16，即：按16进制解析字符串

    <script type="text/javascript">
        window.onload = function testParse() {            
            alert(parseInt("0Xabcg")); 
        }
    </script>

结果为：2478，10*16²+11*16+12*1

如果是parseInt("0Xgabcg")，返回what？答案是NaN。上面我已经说过了，紧跟在0X后面的字母是g，并不是一个有效的16进制字符，按照ECMAScript的解释直接返回NaN

2）如果参数“string”，以“0”开头，基数默认为？

    很明显w3school和mozilla的说法不一致，我们测试看下，选择IE10、Chrome、Firefox（版本都是最新的）

    <script type="text/javascript">
        window.onload = function testParse() {            
            alert(parseInt("010")); 
        }
    </script>

    结果依次是：10、10、8；IE10、Chrome是以10进制解析的，FF是以8进制解析的。

    看来并没有出现以16进制解析，真的是吗？继续验证

    <script type="text/javascript">
        window.onload = function testParse() {            
            alert(parseInt("09")); 
        }
    </script>

 

　　结果依次是：9、9、0；IE10、Chrome是以10进制解析的，FF是以8进制解析的（因9并不是8进制的有效表示，因此只会解析第一个数字0，结果为0）。

　　验证的结论很明显，mozilla开发者上面的描述目前看来是正确的。

     我的电脑上只有这三个浏览器，无法得知其它浏览器上会产生什么样的结果，如果有谁验证出能以16进制转换，请告知，3Q

3）如果参数“string”的开头并不是以上两类，就按照10进制进行解析

    <script type="text/javascript">
        window.onload = function testParse() {            
            alert(parseInt("fff")); 
        }
    </script>

结果返回：NaN，首字母‘f’ 并不是10进制的有效表示，直接返回NaN

4）该调用方法的各规则也都遵循parseInt(string, radix)一节中的规则，即：只解析有效字符，例：

    <script type="text/javascript">
        window.onload = function testParse() {
            alert(parseInt("0xf1x")); 
            alert(parseInt("021x")); 
        }
    </script>

结果分别为：

241（IE、Chrome、FF），有效字符为“f1”，15*16+1 = 241

21（IE、Chrome）或17（FF），有效字符为“21”，10进制直接等于21，8进制：2*8+1=17

 

End

parseInt()本是JS中比较简单的函数，但正是由于大家都不太注意这些细节，导致它用起来很“麻烦”。希望本章内容对大家有所帮助。