將字串轉成數字的 parseInt()和 Number()

我們常常需要把一些資料裡面的數字相加，但是拿到的資料卻是字串，字串和字串相加，只會讓數字串在一起，並不會計算數字，這時我們會先將字串，轉成數字型別再做運算，最常用的方法就是parseInt()和 Number()。但這兩種有什麼不同呢？

parseInt()

語法：‵parseInt(string, radix);‵

parseInt() 會將指定的字串以指定的進位方式轉換成整數。 parseInt() 可以帶入兩個參數 parseInt（string，radix），第一個參數就是我們希望轉換成數字的「數字字串」，第二個參數為指定的「進位制」，我們一般使用 10 進位制，也有可能會用到其他進位制，如 8 或 16，解析出來的結果也會依進位制不同而轉換。如果沒有給第二參數，則會默認以 10 進位制來轉換數字。

parseInt('42', 8); // 34
parseInt('24', 8); // 20

parseInt('42', 42); // 42
parseInt('24', 24); //24

parseInt('42', 16); // 66
parseInt('24', 16); // 36

parseInt('x2'); // NaN
parseInt('42A'); // 42
parseInt(' 42'); // 42
parseInt('42.02'); // 42

parseInt() 會把第一參數的字串轉換成「整數」，如果遇到無法轉換的字串，就會直接回傳 NaN。也就是說第二參數進位制(radix)，在解析時如過碰到無法解析的字元就會停止，並忽略之後的字元，也就是說，如果要解析的字串是"42A"那麼 ‵42‵仍然會被解析，但到無法解析的字元A就會停止解析，並回傳解析會的結果‵42‵。

parseInt() 會忽略前後空白，並根據 radix 解析第一個參數，當遇到無法解析的字元，會忽略該字元及其後的所有字元，停止解析於此字元，並回傳目前為止的結果。

parseInt() - JavaScript | MDN

Number()

語法：new Number(value)，允許以 Number(value) 轉換型別

new Number()是 JavaScript 的內建物件，可以以 new Number()的方式創建數字型別的變數，但 JavaScript 也允許我們只使用Number(value)，將 value 轉換成數字型別。
如果使用Number() 的參數 value 沒辦法被轉換成數字，它就會回傳NaN。如果是布林值 (true, false)或 null，它也會傳回數字。
要判斷傳入的值是不是 NaN，也可以使用 Number.isNaN()。

Number('42'); // 42
Number('42.02'); // 42.02
Number(true); // 1
Number(false); // 0
Number(null); // 0

Number - JavaScript | MDN

parseInt() 和 Number()的比較

我們可以輕易的透過 parseInt() 和 Number()的比較，來輕易的看出兩者的不同，以下我們皆以不同形式的字串來測試，可以整理出以下的結果：

當字串是由數字組成，兩者的轉換結果沒有差別

1
2
3

let numberStr = '42';
parseInt(numberStr); // 42
Number(numberStr); // 42

當字串是由字母組成的時候

1
2
3

let LetterStr = 'abc';
parseInt(LetterStr); // NaN
Number(LetterStr); // NaN

當字串是由數字和字母組成時

1
2
3

let mixStr = '42a';
parseInt(mixStr); // 42
Number(mixStr); //NaN

當字串是由 0 和數字時，會省略 0

1
2
3

let zeroNumStr = '0123';
parseInt(zeroNumStr); //123
Number(zeroNumStr); //123

當字串的數字包含小數點時，parseInt() 回傳整數，可使用 parseFloat()

1
2
3

let numberStr = '123.456';
parseInt(numberStr); // 123
Number(numberStr); // 123.456

當字串是 null 時，Number() 回傳的是 0

1
2
3

let nullNumStr = null;
parseInt(nullNumStr); // NaN
Number(nullNumStr); // 0

當字串是空字串時，Number() 回傳的是 0

1
2
3

let emptyStr = '';
parseInt(emptyStr); // NaN
Number(emptyStr); // 0

parseFloat()

除了parseInt()可將字串轉成數字外，如果遇到有小數點時，就可以使用parseFloat()，因為parseInt()可只會轉換成「整數」，而parseFloat()則可保留小數點。需要注意的是，因為parseFloat()是透過解析浮點數來轉換，所以只會返回第一個浮點數。

parseFloat('42'); // 42
parseFloat('42.02'); // 42.02
parseFloat('42.02.04'); // 42.02
parseFloat('42.0204'); // 42.0204

parseFloat() - JavaScript | MDN

後記

在寫 JavaScript ，尤其是轉換資料型別的時候，常常被這些方法間細微的不同而踩坑，而魔鬼就在細節裡，除了乖乖的跑回去看 MDN 的資料外，有許多前輩也寫了許多比較的文章，多看多服用相信會越來越熟悉不同的用法間的差異。