JavaScript 轉換數字為整數的方法

来源:https://www.cnblogs.com/flyfox1982/archive/2019/05/13/10857284.html
-Advertisement-
Play Games

本文將會列舉並說明JavaScript 把一個number（或者numerical的對象）轉換成一個整數相關方法。 使用parseInt parseInt的語法如下：parseInt(string, radix)參數string的表示要解析的字元串，也可以是一個對象，會自動調用對象的toString ...


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

使用parseInt

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() 方法會將數字的小數部分去掉，只保留整數部分。比如以下代碼:

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-numbers-down

我測試的結果如下，可以發現速度上，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 擴展

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

參考文檔

https://jsperf.com/rounding-numbers-down
https://stackoverflow.com/questions/131406/what-is-the-best-method-to-convert-floating-point-to-an-integer-in-javascript
https://j11y.io/javascript/double-bitwise-not/
https://stackoverflow.com/questions/7487977/using-bitwise-or-0-to-floor-a-number
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators
https://jsperf.com/math-round-vs-hack/25

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

ITman彪叔公眾號
ITman彪叔公眾號
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 5.滾動時鐘特效
    一、html，css部分 二、js部分 三、源代碼部分 四、圖片img ...
  • css-博客樣式初體驗
    css學習一周後，寫了個基礎博客樣式。 樣式是出來了，但是在寫的過程中感覺css寫的雜亂無章，可能是寫的太少了吧，條例不是很清除，只是在寫的過程 中一個點一個點的套，感覺樣式出來即可，沒有做到由全局出發考慮再到局部，再到細節的考慮。 總共耗時4個小時，寫的時候 html 部分頭腦很清晰，可以做到心中 ...
  • Bootstrap4中柵格系統CSS中 col-sm-* col-md-* col-lg-*的意義以及當其同時具有col-xs-* col-sm-* col-md-* col-lg-*的含義
    根據Bootstrap--Grid 中 col-sm-* col-md-* col-lg-* col-xl-*的意義： .col-sm-* 小屏幕 手機 （≥ 576px) .col-md-* 中等屏幕 平板 （≥ 768px) .col-lg-* 大屏幕 桌面顯示器 （≥ 992px) .col- ...
  • CSS3 製作魔方 - 相關立體樣式
    最好的實踐，就是給定一個實踐的目標去實踐。 目標：利用 CSS3 的一些特性，繪製一個魔方，要可以玩轉的那種，即上下左右每一層都可以獨立旋轉。效果如下： 為了完成此效果，將使用到以下相關概念和樣式：坐標、3D呈現、平移、旋轉。 （1）坐標 屏幕的起點坐標是(0,0,0)，往右遞增為 x 方向，使用 ...
  • 淺析libuv源碼-node事件輪詢解析(4)
    這篇應該能結，簡圖如下。 上一篇講到了uv__work_submit方法，接著寫了。 從post開始。 wq就是上一篇講的線程都會用到的那個隊列，這裡負責插入任務，worker中取出任務。 沒想到post到這裡沒了，這點東西併到上一篇就好了。以後寫這種系列博客還是先規劃一下，不能邊看源碼邊寫…… 函 ...
  • javascript的一些有用函數記錄，不斷更新。。。
    addLoadEvent函數： 眾所周知，html文檔載入完後會立即執行一個onload函數。但是onload函數只能包含一個被執行的函數，也就是你需要在載入完文檔後執行的一個自己的函數。在實際中html載入完成後需要執行很多預先執行的函數，那麼怎樣才能讓html文檔載入完後執行很多自己的函數呢？ ...
  • 4.圖片左輪播圖（swiper）
    一、html部分 二、js部分 三、源代碼部分 ...
  • jQuery源碼逐行分析學習01(jQuery的框架結構簡化)
    最近在學習jQuery源碼，在此，特別做一個分享，把所涉及的內容都記錄下來，其中有不妥之處還望大家指出，我會及時改正。望各位大神不吝賜教！同時，這也是我的第一篇前端技術博客，對博客編寫還不是很熟悉，美化工作可能不夠到位，也希望大家多多見諒！ 首先這篇文章要給大家分享的是：jQuery的框架結構，把框 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類