Javascript把數字從string變爲number的5種方式

不少時候，咱們的數字是字符串的形式的，如：'1', '3', ['2', '4']，它們多是從輸入框<input /> 中獲取，多是來自後端的接口。咱們有義務把他們變成整型。下面介紹幾種方案

一、parseInt

這是es3就有的語法了，用法：

parseInt('123'); // 123  => number

js版本發展到es6的時候，parseInt被移到Number中。固然了，原來的parseInt能夠繼續使用

Number.parseInt('123'); // 123  => number

加入數字中帶有非數字的字符，那麼第一個出現非法字符的地方將會被截斷

Number.parseInt('1239y93p21'); // 1239  => number

二、parseFloat

和parseInt差很少，但parseFloat主要針對浮點數的轉換

parseFloat('123');          // 123  => number
Number.parseFloat('123');   // 123  => number

Number.parseFloat('123.4'); // 123.4 => number

一樣有截斷非法字符的規則

Number.parseInt('1239.34y93p21');     // 1239.34  => number
Number.parseInt('12 39.34y93p21');    // 12  => number

三、Number

es6新出的接口，能夠直接使用，而且對浮點數也是有效的

Number('123');     // 123  => number
Number('123.4');   // 123.4 => number

與parse*()不一樣，Number處理時，遇到非法字符，直接NaN了，注意：NaN的類型也是number。

Number('123b');     // NaN  => number
Number('123.4b');   // NaN  => number

四、乘法+減法

是的，直接乘以1就好了

'123' * 1;     // 123  => number
'123.4' * 1;   // 123.4 => number

‘123’ - 0；    // 1234 => number
'123.4' - 0;   // 123.4 => number

遇到非法字符，也是直接NaN了。

'123b' * 1; // NaN  => number

---

注意：加法是不能轉換類型的呢，會被當成字符串拼接：

'123' + 0; // ’1230‘  => string

五、按位或

這就是二進制方面的處理了，可是隻能處理整數。遇到浮點數時，小數部分被丟棄。遇到非法字符，直接被轉換成0。由於按位或會將數字轉換成帶符號的32位整數，多餘的位數會被直接丟棄；因此按位或支持的整數範圍是[pow(-2, 31), pow(2, 31) - 1]

'123' | 0;           // 123  => number

'123.4' | 0;         // 123 => number
'123rd' | 0;         // 0 => number

a = Math.pow(2, 31) // 2147483648 <=> 10000000000000000000000000000000

a | 0               // -2147483648 => number
(a - 1) | 0         // 2147483647 => number

爲何整數轉爲負數了呢，由於帶符號二進制中，最高位(第32)是1，表明負數

---

題外話

對於字符串數組的轉換，能夠利用Number的特性

['1', '2', '3'].map(Number)  // [1, 2, 3] => number[]

---

還有其餘的嗎？若是有補充歡迎留言。