JavaScript中小數(shù)點精度丟失的原因以及解決方法
一、為什么會出現(xiàn)計算精度丟失的問題？
JavaScript中存在小數(shù)點精度丟失的問題是由于其使用的浮點數(shù)表示方式。JavaScript采用的是雙精度浮點數(shù)表示法，也稱為IEEE 754標準，它使用64位來表示一個數(shù)字，其中52位用于表示有效數(shù)字，而其他位用于表示符號、指數(shù)和特殊情況。
由于使用有限的位數(shù)來表示無限的小數(shù)，JavaScript無法準確地表示某些小數(shù)。其中一個典型的示例是0.1，它在二進制中是一個無限循環(huán)的小數(shù)。當我們將0.1這樣的小數(shù)轉換為二進制進行存儲時，存在近似表示的誤差，因此在進行計算時會出現(xiàn)精度丟失的問題。
例如，執(zhí)行以下計算：
0.1 + 0.2
預期的結果應該是0.3，但在JavaScript中實際得到的結果是0.30000000000000004。這是因為0.1和0.2無法以精確的二進制形式表示，導致小數(shù)點精度丟失。
這種精度丟失是浮點數(shù)表示法的固有特性，并不僅限于JavaScript，其他編程語言也可能面臨類似的問題。因此，在進行精確計算時，特別是涉及到貨幣、金融等方面的計算，應使用其它精確計算的方法，例如使用整數(shù)進行運算或使用專門的精確計算庫。
總而言之，小數(shù)點精度丟失的問題是由于JavaScript使用的浮點數(shù)表示法的特性所致，需要在開發(fā)中注意，并考慮使用其他方法或工具來解決精度問題。
二、代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var floatObj = function () {
// 判斷傳入的值-是否為整數(shù)
function isInteger(obj) {
return Math.floor(obj) === obj
}
// 將一個浮點數(shù)轉成整數(shù)，返回整數(shù)和倍數(shù)。如 3.14 >> 314，倍數(shù)是 100
// @param floatNum { number } 小數(shù)
// @return { object }
// { times: 100, num: 314 }
// 用于返回整數(shù)和倍數(shù)
function toInteger(floatNum) {
// 聲明一個對象用來保存倍數(shù)和整數(shù)
var ret = { times: 1, num: 0 }
// 第一種情況：是整數(shù)
if (isInteger(floatNum)) {
// 把整數(shù)給 ret中的 num
ret.num = floatNum
return ret // 最后返回 ret
}
// 第二種情況-不是整數(shù)，
var strfi = floatNum + '' // 轉為字符串 "0.1"
var dotPos = strfi.indexOf('.') // 查詢小數(shù)點
var len = strfi.substr(dotPos + 1).length; // 獲取小數(shù)點后的長度
var times = Math.pow(10, len) // 放大多少倍
var intNum = Number(floatNum.toString().replace('.', '')) // 返回 轉為字符串 截取掉小數(shù)點 最后轉為數(shù)字（整數(shù)）
// 把獲取到的倍數(shù)和整數(shù)存入對象中
ret.times = times
ret.num = intNum
return ret
}
// 核心方法，實現(xiàn)加減乘除運算，確保不丟失精度
// 思路：把小數(shù)放大為整數(shù)（乘），進行算術運算，再縮小為小數(shù)（除）
// @param a { number } 運算數(shù)1
// @param b { number } 運算數(shù)2
// @param digits { number } 精度，保留的小數(shù)點數(shù)，比如 2, 即保留為兩位小數(shù)
// @param op { string } 運算類型，有加減乘除（add / subtract / multiply / divide）
function operation(a, b, digits, op) {
// 獲取倍數(shù)和整數(shù)的對象
var o1 = toInteger(a)
var o2 = toInteger(b)
// 提取整數(shù)
var n1 = o1.num
var n2 = o2.num
// 提取倍數(shù)
var t1 = o1.times
var t2 = o2.times
// 獲取最大倍數(shù)
var max = t1 > t2 ? t1 : t2
var result = null //
switch (op) {
case 'add':
if (t1 === t2) { // 兩個小數(shù)位數(shù)相同
result = n1 + n2 //
} else if (t1 > t2) { // o1 小數(shù)位 大于 o2
result = n1 + n2 * (t1 / t2)
} else { // o1 小數(shù)位 小于 o2
result = n1 * (t2 / t1) + n2
}
return result / max
case 'subtract':
if (t1 === t2) {
result = n1 - n2
} else if (t1 > t2) {
result = n1 - n2 * (t1 / t2)
} else {
result = n1 * (t2 / t1) - n2
}
return result / max
case 'multiply':
result = (n1 * n2) / (t1 * t2)
return result
case 'divide':
result = (n1 / n2) * (t2 / t1)
return result
}
}
// 加減乘除的四個接口
function add(a, b, digits) {
return operation(a, b, digits, 'add')
}
function subtract(a, b, digits) {
return operation(a, b, digits, 'subtract')
}
function multiply(a, b, digits) {
return operation(a, b, digits, 'multiply')
}
function divide(a, b, digits) {
return operation(a, b, digits, 'divide')
}
return {
add: add,
subtract: subtract,
multiply: multiply,
divide: divide
}
}();
// console.log(floatObj.add(0.5, 0.2))
console.log(floatObj.add(0.12, 0.3))
</script>
</head>
<body>
</body>
</html>三、解決思路
解決方法：
1.首先封裝一個函數(shù)，這個函數(shù)是用來判斷單價是否為一個整數(shù)。
2.然后在封裝第二個函數(shù)，這個函數(shù)的作用是返回整數(shù)和倍數(shù)的。
同時聲明一個對象ret來保存這個倍數(shù)和整數(shù)，
第一種情況就是單價傳過來時就是整數(shù)，那么他的倍數(shù)也就為1, 所以我們可以直接存儲到聲明的對象中
第二種情況就是當單價傳過來時是浮點數(shù)，這時候我們就要做處理，
（1）、將傳遞過來的參數(shù)轉為字符串(隱式轉換),
（2）、使用indexOf找到小數(shù)點'.'，
（3）、使用substr字符串方法截取小數(shù)點后的長度length，
（4）、聲明一個為倍數(shù)的變量Time，同時使用Math.pow(10, 上一步截取的長度), 這個time就是倍數(shù)，小數(shù)點后每多一位就會為10×長度的次方，再將浮點數(shù)轉換為整數(shù)(tostring轉為字符, 使用replace將小數(shù)點替換為空，再用Number將字符串轉為數(shù)字)
最后將獲取到的倍數(shù)和整數(shù)存入對象中即可
3.最后實現(xiàn)加減乘除運算，確保不丟失精度
主要思路：把小數(shù)放大為整數(shù)（乘），進行算術運算，再縮小為小數(shù)（除）
再次封裝一個為實現(xiàn)運算的函數(shù)這個函數(shù)接受三個參數(shù)(運算數(shù)1，運算數(shù)2, '加減乘除四個方法的函數(shù)'),
聲明n1, n2, 分別為單價1, 單價2,
聲明t1, t2.為單價1的倍數(shù)和單價2的倍數(shù)
再獲取最大倍數(shù)max(使用三元運算符),
使用switch判斷條件就是('加減乘除四個方法的函數(shù)')搭配Case判斷
加法: 三種狀況
1.t1和t2相同的情況下，就是兩個小數(shù)的位數(shù)相同情況下直接返回n1 + n2 就是整數(shù)相加
2.t1大于t2的情況下 第一個小數(shù)位數(shù)大于第二位返回, n1 + n2 * (t1 / t2):
3.t1小于t2的情況下 第一個小數(shù)位數(shù)小于第二位返回, n1 * (t2 / t1) + n2
最后無論走得是哪一種情況結果都要除以max(最大倍數(shù))
減法: 三種狀況
1.t1和t2相同的情況下，就是兩個小數(shù)的位數(shù)相同情況下直接返回n1 - n2 就是整數(shù)相減
2.t1大于t2的情況下 第一個小數(shù)位數(shù)大于第二位返回, n1 - n2 * (t1 / t2)
3.t1小于t2的情況下 第一個小數(shù)位數(shù)小于第二位返回, n1 * (t2 / t1) - n2
最后無論走得是哪一種情況結果都要除以max(最大倍數(shù))
乘法: 判斷狀態(tài)時候結果的是（n1 × n2）/ (t1 × t2)
除法: 判斷狀態(tài)時候結果的是（n1 × n2）/ (t1 × t2)
--- 最后進行加減乘除進行封裝，return這四個函數(shù)-- -
四、解決的問題
在 JavaScript 中處理小數(shù)點精度可以帶來以下幾個好處：
避免精度丟失：JavaScript 使用 IEEE 754 浮點數(shù)標準來表示數(shù)字，但由于浮點數(shù)存儲的是二進制近似值，會導致一些小數(shù)無法被準確表示，從而造成精度丟失。通過處理小數(shù)點精度，可以減少這種精度丟失的情況，確保計算結果的準確性。
精確計算金融數(shù)據(jù)：在金融領域，小數(shù)點精度非常重要。處理貨幣金額、計算利率和利息等都需要保持精確的小數(shù)點計算，以避免數(shù)據(jù)錯誤和損失。
避免舍入誤差：當進行多個浮點數(shù)計算時，由于每次計算都可能存在一定的舍入誤差，累積計算結果可能會與預期的結果有所偏差。通過處理小數(shù)點精度，可以減少舍入誤差的影響，提高計算的準確性。
增強數(shù)據(jù)可視化：在圖表和可視化數(shù)據(jù)中，小數(shù)點精度可以提供更精確的數(shù)據(jù)展示。例如，在繪制股票價格曲線或者科學實驗數(shù)據(jù)時，小數(shù)點精度可以使得數(shù)據(jù)更加準確和可信。
總的來說，處理小數(shù)點精度可以確保計算結果的準確性，尤其在對于金融數(shù)據(jù)和需要高精度計算的場景下，這種處理是非常重要的。
五、二進制存儲原理
在JS中不區(qū)分整數(shù)和小數(shù)，因為JS中天生浮點數(shù)（雙精度），在計算機存儲中，雙精度的實際存儲位數(shù)是52位，由于二進制中只有 0 和 1，但52位有時并不能準確的表達小數(shù)點后面的數(shù)字，在十進制中有四舍五入，在二進制中存在0舍1入，所以當52位無法準確的表達出一個小數(shù)時，就會產(chǎn)生補位動作，數(shù)值偏差就在這時產(chǎn)生了，這是造成計算精度問題的原因。
總結
到此這篇關于JavaScript中小數(shù)點精度丟失的原因以及解決方法的文章就介紹到這了,更多相關JS小數(shù)點精度丟失內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
因為php的print_r比較好用同時js卻沒有這個功能于是自己就寫了一個，感興趣的你可不要錯過了哈，希望本文對你提高知識有所幫助2013-02-02
這篇文章主要給大家總結介紹了關于JavaScript中的一些實用小技巧，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
這篇文章主要介紹了JavaScript的表達式與運算符，需要的朋友可以參考下2015-11-11
JavaScript 動態(tài)添加表格行 使用模板、標記
在客戶端使用JavaScript動態(tài)添加表格行，先到網(wǎng)上找了相關的資料，發(fā)現(xiàn)有現(xiàn)成做好的組件，發(fā)現(xiàn)它只能夠滿足比較簡單的要求。2009-10-10
JS電話號碼驗證是比較常的一種驗證，下邊給出一個JavaScript驗證電話號碼的小例子。國內(nèi)固定電話都是七位或8位的數(shù)字組成的，還可以帶有長途的區(qū)號。2015-09-09
Javascript 在瀏覽器中的性能問題，可能是最重要的可用性問題;Js的阻塞性 瀏覽器用單一進程來處理UI進程和Js的執(zhí)行;不管是內(nèi)嵌的還是外鏈的，下載并立即執(zhí)行 因為它有可能會修改頁面2012-12-12
JS防抖節(jié)流函數(shù)的實現(xiàn)與使用場景
在行走江湖的過程中,會出現(xiàn)很多性能優(yōu)化的問題來讓你手足無措,那么這篇文章主要給大家介紹了關于JS防抖節(jié)流函數(shù)的實現(xiàn)與使用場景,針對這兩個問題來為你答疑解惑,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Javascript模擬實現(xiàn)new原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
JavaScript按規(guī)定生成隨機數(shù)，并按指定順序自動排序，本例中將生成1——100以內(nèi)的隨機數(shù)，并按照由小到大的順序排列起來。2009-12-12
搞開發(fā)已經(jīng)很久了，一直搞不懂a(chǎn)++和++a到底有所什么不同，后來通過查閱相關資料總結出一點規(guī)律，下面小編通過本文給大家介紹2017-08-08