為何 parseInt(0.000002) 與 parseInt(0.0000002) 的結果不同？

Photo by Thimo Pedersen on Unsplash

今天這篇我們來看一個關於 parseInt 很有意思的狀況。我們可以先試試看在 Console 輸入：

parseInt(0.00002) === parseInt(0.000002) // true
parseInt(0.0000002) === parseInt(0.000002) // false

第一個結果回傳了 true，第二個則是 false。如果我們在 Console 輸入 parseInt(0.0000002)，會發現它回傳了 2 而不是 0，為什麼會這樣呢？

parseInt 的用途

parseInt 可以將我們輸入的字串轉為整數，其可以夾帶兩個參數：

• string — 要轉成整數的字串，如果不是字串，會先執行 toString 將它轉為字串。
• radix — 代表該進位系統的數字，例如 parseInt(‘1111’, 2) 會回傳 15。

接著回頭看看這個呼叫的方式：

parseInt(0.0000002) // 2

因為傳入的並不是字串而是數字，parseInt 會把傳入的 0.0000002 先轉成字串，我們看看轉成字串的結果：

const num1 = 0.000002
num1.toString()  // '0.000002'

const num2 = 0.0000002
num2.toString()  // '2e-7'

要理解為什麼輸出的結果會有差異，我們需要了解 toString 對數字處理時的一個特性：當數字包含小數，且數字大於 10 的 21 次方或小於 10 的 -6 次方時，會使用科學記數法。'2e-7' 便是轉換的結果。

而根據 MDN 的解釋：

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point.

parseInt 在由左至右解析字串時，如果在 radix 的規則下碰到無法解析的字時，它會停止解析並直接回傳解析的結果，所以我們才能使用像這樣的方式：

parseInt('200px')

去把 DOM 元素上抓到的屬性值轉為數字。parseInt 在解析 ‘2e-7’ 時，因為無法解析 e 這個字，因此就直接回傳了 2 導致了

parseInt(0.0000002) === parseInt(0.000002) // false

回傳了 false 而非 true。

以上就是關於 parseInt 一個在呼叫上可能會踩到的雷，我個人覺得在使用上應該還是要傳入最合適的型別，才能避免一些沒有預想到的事情發生。

這篇文就紀錄到這，希望有幫助到閱讀的你。如果內文有任何錯誤，也煩請不吝指出，謝謝大家。

References:

JavaScript parseInt() Function - GeeksforGeeks

parseInt() - JavaScript | MDN

Number.prototype.toString() - JavaScript | MDN

Why does JavaScript’s parseInt(0.0000005) print “5”?