瞭解Javascript函數：parseInt()

前些天在使用parseInt()函數時，遇到某些轉換時總是不能快速一次性給出答案，索性就研究一番，避免以後再次使用時又得想來想去的。

定義
1、w3school：

parseInt() 函數可解析一個字串，並返回一個整數。

 
2、mozilla開發人員

Parses a string argument and returns an integer of the specified radix or base.
 
其中對瀏覽器的差異性值得大家注意

解析
根據上述官方解釋， 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中比較簡單的函數，但正是由於大家都不太注意這些細節，導致它用起來很“麻煩”。希望本章內容對大家有所協助。