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