摘要：另外自己寫代碼測試了下和的速度，比較結果如下位操作轉換整數的原理參考上面對于位操作的說明，點擊下面鏈接有這樣一段話中，數字存儲是雙進度位浮點數。但是位操作卻會把要操作的運算元當做位帶符號的整數。因此進行位操作時，會自動把數字先轉換為整數。

本文將會列舉并說明JavaScript 把一個number（或者numerical的對象）轉換成一個整數相關方法。

parseInt的語法如下：parseInt(string, radix)
參數string的表示要解析的字符串，也可以是一個對象，會自動調用對象的toString函數得到要解析的字符串。

parseInt的第二個參數，可以指定要解析的數字的基數，注意該值介于 2 ~ 36 之間，如果該參數小于 2 或者大于 36，則 parseInt() 將返回 NaN。比如下面的代碼，結果為8，這樣可以很方便的把其他的進制的數字轉換為10進制的數字：

parseInt(10,8) // 結果為8

當參數 radix 的值為 0，或沒有設置該參數時，parseInt() 會根據 string 來判斷數字的基數。
舉例，如果 string 以 "0x" 開頭，parseInt() 會把 string 的其余部分解析為十六進制的整數。如果 string 以 0 開頭，那么 ECMAScript v3 允許 parseInt() 的一個實現把其后的字符解析為八進制或十六進制的數字。如果 string 以 1 ~ 9 的數字開頭，parseInt() 將把它解析為十進制的整數。

注釋

1. 只有字符串中的第一個數字會被返回。 什么意思呢，如果輸入的字符串是"123abc","123,123"，那么結果是123，parseInt方法會自動忽略后面的非數字部分。
2. 輸入字符串開頭和結尾的空格是允許的。
3. parseFloat 也具備以上兩條特征，不過本文不重點講述。 

Math.trunc() 方法會將數字的小數部分去掉，只保留整數部分。比如以下代碼:

Math.trunc(13.37)    // 13
Math.trunc(42.84)    // 42
Math.trunc(0.123)    //  0
Math.trunc(-0.123)   // -0
Math.trunc("-1.123") // -1
Math.trunc(NaN)      // NaN
Math.trunc("foo")    // NaN
Math.trunc()         // NaN

當傳入的類型不是數字的時候，會自動做癮式轉換。但是如果是一個非numerical的參數的時候，返回NaN。
IE瀏覽器并不支持這個方法，所以可以考慮polyfill:

Math.trunc || (Math.trunc = function(v){
   return v < 0 ? Math.ceil(v) : Math.floor(v); // 使用Math.floor和Math.ceil方法
})
// 或者
if (!Math.trunc) {
    Math.trunc = function(v) {
        v = +v;
        if (!isFinite(v)) return v;
        
        return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
        
        // 返回:
        //  0        ->  0
        // -0        -> -0
        //  0.2      ->  0
        // -0.2      -> -0
        //  0.7      ->  0
        // -0.7      -> -0
        //  Infinity ->  Infinity
        // -Infinity -> -Infinity
        //  NaN      ->  NaN
        //  null     ->  0
    };
}

對于numerical的對象n,可以通過如下的方式來轉換為整數：

~~n 雙重位取反（Double bitwise NOT）

n | n 位或運算(Bitwise OR)

n | 0 和0的位或運算(Bitwise OR with 0)

n << 0 位左移運算0位(Bitwise left shift)

n >> 0 位右移運算0位(Bitwise right shift)

n & n 為與運算（Bitwise AND）

比如代碼如下：

   ~~1.23 // 1
   -1.2 | -1.2  // - 1
   -1.2 | 0  // - 1
   3.4 >> 0 // 3
   3.2 << 0 // 3
   5.5 & 5.5 // 5
  ~~"1.2" // 1.2 

注意，從上面可以看出，位運算下字符串會自動轉換數字。

下面這個網址可以測試以上方法測性能情況，其中沒有用到Math.trunc方法，用Math.floor方法代替了Math.trunc方法：
https://jsperf.com/rounding-n...

我測試的結果如下，可以發現速度上，parseInt是最慢的，其他方法相對較快:

從代碼量的角度來說，n | 0 或則 ~~n是字符最少的，寫起來應該也是最方便的， 但是可讀性會變差。

另外自己寫代碼測試了下Math.trunc和Math.floor的速度，比較結果如下：

    console.time("Math.trunc");
    for(var i = 0;i < 1000000000;i ++){
        Math.trunc(3.3);
    }
    console.timeEnd("Math.trunc");

    console.time("Math.floor");
    for(var i = 0;i < 1000000000;i ++){
        Math.floor(3.3);
    }
    console.timeEnd("Math.floor");
//  Math.trunc: 8658.009033203125ms
//  Math.floor: 7916.7890625ms

參考Mozilla上面對于位操作的說明，點擊下面鏈接：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators
有這樣一段話：

Bitwise operators treat their operands as a sequence of 32 bits (zeroes and ones), rather than as decimal, hexadecimal, or octal [numbers]

JavaScript中，數字存儲是雙進度64位浮點數。但是位操作卻會把要操作的運算元當做32位帶符號的整數。因此進行位操作時，會自動把數字先轉換為整數。對數字n做前面提到的位運算，相當于n & 0xFFFFFFFF

用位操作進行整數轉換的優點，大概包括如下：

性能更快

代碼字符可以更少（比如 n | 0或者~~n）

用位操作進行整數轉換的缺點，大概包括如下：

代碼不易懂

可能不能通過jsLint

只支持32位以內的數據，超過范圍就會得出錯誤的結果。

對于“只支持32位以內的數據，超過范圍就會得出錯誤的結果”這一點，因為位運算會把運算元當做32位帶符號的整數，其范圍是-2,147,483,648 到 2147483647 (0x7FFFFFFFF)，超過范圍就不奏效了。比如如下代碼

~~2147483648.1//-2147483648

由于2147483648.1超過了范圍，其結果變成了-2147483648，而不是2147483648。下面列出安全和不安排的轉換的更多示例:

 // Safe
 (2147483647.5918 & 0xFFFFFFFF) ===  2147483647
 (2147483647      & 0xFFFFFFFF) ===  2147483647
 (200.59082098    & 0xFFFFFFFF) ===  200
 (0X7FFFFFFF      & 0xFFFFFFFF) ===  0X7FFFFFFF

 // Unsafe
 (2147483648      & 0xFFFFFFFF) === -2147483648
 (-2147483649     & 0xFFFFFFFF) ===  2147483647
 (0x80000000      & 0xFFFFFFFF) === -2147483648
 (3000000000.5    & 0xFFFFFFFF) === -1294967296

為了能夠提高性能，又保證超過范圍的時候安全可靠，可以考慮下面的polyfill:

function trunc(n) {
    if (n > -0x80000000 && n < 0x80000000) {
      return n & 0xFFFFFFFF; //此處可以用 ~~n,n | 0等等
    }
    return Math.trunc(n);
}

同樣可以用位操作實現Math.round的功能，比如：

~~ (somenum + (somenum > 0 ? .5 : -.5)) == Math.round(somenum)

下面是相關的性能測試，可以參考：
https://jsperf.com/math-round-vs-hack/25.

https://jsperf.com/rounding-n...
https://stackoverflow.com/que...
https://j11y.io/javascript/do...
https://stackoverflow.com/que...
https://developer.mozilla.org...
https://jsperf.com/math-round...

歡迎關注公眾號“ITman彪叔”。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。熟悉Java、JavaScript。在計算機圖形學、WebGL、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業規劃和程序員理財投資有濃厚興趣。