從一個 bug 看 javascript 的精度丟失的問題

NusterCache 發布于2019-08-23 12:19 / 1008人閱讀

摘要：就像一些無理數不能有限表示，如圓周率，等。遵循規范，采用雙精度存儲，占用。參考中不會失去精度的最大值數字精度丟失的一些典型問題

問題描述

后端返回 { spaceObject: { objectId: "1049564069045993472" } }

前端模版，使用的是 atpl 模版

前端獲取 objectId 的方式，const objectId = $("#test").data("id")

正常理解，我們獲取到的 objectId 就是返回的 1049564069045993472，可是現實情況是這個 objectId 是 1049564069045993500

問題拆分 一，為什么從 dom 中獲取的字符串會變成數字

查看 zepto 代碼可知，由于通過 $("#test").data("id") 獲取到的字符串 "1049564069045993472" 經過 deserializeValue 方法之后就變成數字了。

關鍵代碼如下：

data: function (name, value) {
      //[Opt:C]將原本在父級作用域的變量轉移至局部變量
      var capitalRE = /([A-Z])/g,
        data = this.attr("data-" + name.replace(capitalRE, "-$1").toLowerCase(), value)
      return data !== null ? deserializeValue(data) : undefined
    },

// "true"  => true
  // "false" => false
  // "null"  => null
  // "42"    => 42
  // "42.5"  => 42.5
  // "08"    => "08"
  // JSON    => parse if valid
  // String  => self
function deserializeValue(value) {
    var num
    try {
      return value ?
        value == "true" ||
        ( value == "false" ? false :
          value == "null" ? null :
            !/^0/.test(value) && !isNaN(num = Number(value)) ? num :
              /^[[{]/.test(value) ? $.parseJSON(value) :
                value )
        : value
    } catch (e) {
      return value
    }
  }

二，為什么數字跟 dom 中獲取的不一致

由于javascript的能夠保持精度的最大值是 9007199254740991，所以由于上面那個數字大于這個最大安全數，所以會出現失去精度的問題。

引申 javascript 中精度丟失的幾種情況 1. 簡單的浮點數相加

0.1 + 0.2 !== 0.3 // true
0.1 + 0.2 === 0.3 // false
)

2. 大整數丟失精度

99999999999999999 === 100000000000000000

3. toFxied 有些情況下不會四舍五入

(12.235).toFixed(2) // 12.23

數字精度丟失問題原因分析

首先，javascript 中保持精度不丟失的數值是有個范圍的，是在 Number.MIN_SAFE_INTEGER 和 Number.MAX_SAFE_INTEGER 之間. Number.MAX_SAFE_INTEGER => 9007199254740991 => 2的53次方-1

ECMA Section 8.5 - Numbers Note that all the positive and negative integers whose magnitude is no greater than 253 are representable in the Number type (indeed, the integer 0 has two representations, +0 and ?0).

計算機的二進制實現和位數限制有些數無法有限表示。就像一些無理數不能有限表示，如圓周率 3.1415926...，1.3333... 等。JS 遵循 IEEE 754 規范，采用雙精度存儲（double precision），占用 64 bit。如圖

* 1位用來表示符號位
* 11位用來表示指數
* 52位表示尾數

深入了解

解決方案

使用 big.js庫

如果是小數加減可以通過先將所有小數轉化為整數（乘倍數），然后完成運算，最后縮小回去（除倍數）。

0.01 + 0.2 // 0.21000000000000002
(0.01 * 100 + 0.2 * 100) / 100 // 0.21

參考

javascript 中不會失去精度的最大值

JS數字精度丟失的一些典型問題

云服務器 GPU云服務器怎么找一個軟件的bug 從哪里看快刪除的域名阿里云的服務器密碼從哪里看看apue遇到的有關問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98303.html

數據精度問題自查手冊

摘要：前言在數據敏感的業務場景中，常常會碰到數據精度問題，尤其在金額顯示占比統計等地方，該問題尤為顯著。計算機原理真香數值的精度問題，其實是非?；A的計算機原理知識。前言在數據敏感的業務場景中，常常會碰到數據精度問題，尤其在金額顯示、占比統計等地方，該問題尤為顯著。由于數據的每一位有效數字都包含真實的業務語義，一點點偏差甚至可能影響業務決策，這讓問題的嚴重性上升了幾個階梯。那，什么是精度丟失...

liangzai_cool 2019-05-23 16:28 評論0 收藏0
由parseInt 引發的問題---想到浮點運算精度丟失---看透js number 的 encod

摘要：如題先陳述下問題背景偶爾測測自己寫的計算器，隨便輸入玩嘛，然后發生下面詭異的事情當我從一個輸入到十個的時候，過程顯示都是正確的，像這樣繼續輸入一個的時候，然后就這個樣子了什么原因呢看了下自己的代碼，代碼重要部分長這樣的這里用了一下強制轉化為如題先陳述下問題背景偶爾測測自己寫的計算器，隨便輸入玩嘛，然后發生下面詭異的事情：當我從一個 1 輸入到十個 1 的時候，過程顯示都是正確的...

hightopo 2019-08-22 14:52 評論0 收藏0
探尋 JavaScript 精度問題以及解決方案

摘要：推導為何等于在中所有數值都以標準的雙精度浮點數進行存儲的。先來了解下標準下的雙精度浮點數。精度位總共是，因為用科學計數法表示，所以首位固定的就沒有占用空間。驗證完成的最大安全數是如何來的根據雙精度浮點數的構成，精度位數是。閱讀完本文可以了解到 0.1 + 0.2 為什么等于 0.30000000000000004 以及 JavaScript 中最大安全數是如何來的。十進制小數轉為二...

YanceyOfficial 2019-08-23 12:13 評論0 收藏0
JavaScript 基礎知識 - 入門篇(一)

摘要：如圖意義位用來表示符號位位用來表示指數位表示尾數浮點數，比如無限循環無限循環此時只能模仿十進制進行四舍五入了，但是二進制只有和兩個，于是變為舍入。這即是計算機中部分浮點數運算時出現誤差，丟失精度的根本原因。 showImg(http://ww1.sinaimg.cn/large/9c47d583gy1fmtw1ma9g4j21hc0u0ach.jpg); 前言最近一直有小伙伴跟我說J...

sarva 2019-08-21 17:58 評論0 收藏0
「干貨」細說 Javascript 中的浮點數精度丟失問題（內附好課推薦）

摘要：前言最近，朋友問了我這樣一個問題在中的運算結果，為什么是這樣的雖然我告訴他說，這是由于浮點數精度問題導致的。由于可以用階碼移動小數點，因此稱為浮點數。它的實現遵循標準，使用位精度來表示浮點數。 showImg(https://segmentfault.com/img/remote/1460000018981071); 前言最近，朋友 L 問了我這樣一個問題：在 chrome 中的運算...

senntyou 2019-08-23 17:06 評論0 收藏0