JavaScript 三種字串轉數字的方法

Converting strings to numbers with vanilla JavaScript

透過瀏覽器輸入的內容，要拿來做運算用的時候，必須先轉成數字，否則運算出來結果一定會讓人出乎意料。列如要使用者輸入兩個數字，然後將其相加，再將結果顯示於畫面，如果不做轉型，則會 1 + 1 = 11, 4 + 2 = 42,而不是我們想要的 2 和 6。

字串轉數字

42 和 ‘42’ 都是數字，但對 JS 來說卻是不同的。
我們可以以嚴格模式的比較運算子，透過以下的方式得知，兩者的不同。

var num1 = '42';
var num2 = 42;
if (num1 === num2) {
  return true;
} else {
  return false;
} // true

以下有幾個方式將字串轉成數字，但不同的方式有不同的特色與優缺點。

parseInt()

將字串轉數字，回傳整數(whole number)。第一參數為字串，第二參數(進位)，如不給第二參數，則會以預設十進位轉數字。

1
2
3

var text = '42px';
var integer = parseInt(num1, 10);
console.log(integer); // 42

比較有趣的是，如果把開頭是數字，之後接字母的字串丟入處理，parseInt 也會回傳數字的部份。如果字串開頭沒有數字，則會回傳 NaN。

1
2
3

parseInt('42px'); // 42
parseInt('Hello paris'); // NaN
parseInt('px42', 10); // NaN

parseFloat()

可以將放入的字串，回傳成帶有小數點(point number)的數字，如果有遇到非數字，則會只取數字，如果無法轉成數字，則會返回 NaN。

var text = '4.2isInFrance';
var pointNumber = parseFloat(text);
console.log(pointNumber);

// 其他例子
parseFloat('234.234des'); // 234.234
parseFloat('234.f234fff'); // 234
parseFloat('f234.f234fff'); // NaN

Number()

放入字串就會回傳數字，但是不容許混雜數字以外的字元，可以是小數點。屬於較嚴僅的字串轉數字的方式，只要字串裡有數字以外的字元都會傳回 NaN。

Number('42'); // 42
Number('24.42'); // 24.42
Number('-24.42'); // -24.42
Number('-0'); // -0
Number('is42'); // NaN
Number('24.42isASchool'); // NaN

透過以上幾個字串轉數字的方式比較，以後就知道，用哪個方式轉成數字比較保險了。