關於js浮點數計算精度不准確問題的解決辦法

今天在計算商品價格的時候再次遇到js浮點數計算出現誤差的問題，以前就一直碰到這個問題，都是簡單的使用tofixed方法進行處理一下，這對於一個程序員來說是及其不嚴謹的。因此在網上收集了一些處理浮點數精度的文章。覺得別人寫的挺好了，我在簡單的總結一下，以方便后續查閱。

浮點數誤差產生的原因：

先看一個實例：

0.1 + 0.2 =？

0.1 + 0.2 = 0.3？

我們先來看一段 JS。

console.log( 0.1+ 0.2);

輸出為 0.30000000000000004。是不是很奇葩
其實對於浮點數的四則運算，幾乎所有的編程語言都會有類似精度誤差的問題，只不過在 C++/C#/Java 這些語言中已經封裝好了方法來避免精度的問題，而 JavaScript 是一門弱類型的語言，從設計思想上就沒有對浮點數有個嚴格的數據類型，所以精度誤差的問題就顯得格外突出。下面就分析下為什么會有這個精度誤差，以及怎樣修復這個誤差。

首先，我們要站在計算機的角度思考 0.1 + 0.2 這個看似小兒科的問題。我們知道，能被計算機讀懂的是二進制，而不是十進制，所以我們先把 0.1 和 0.2 轉換成二進制看看：

0.1 => 0.0001 1001 1001 1001…（無限循環）
0.2 => 0.0011 0011 0011 0011…（無限循環）

上面我們發現0.1和0.2轉化為二進制之后，變成了一個無限循環的數字，這在現實生活中，無限循環我們可以理解，但計算機是不允許無限循環的，對於無限循環的小數，計算機會進行舍入處理。進行雙精度浮點數的小數部分最多支持 52 位，所以兩者相加之后得到這么一串 0.0100110011001100110011001100110011001100110011001100 因浮點數小數位的限制而截斷的二進制數字，這時候，我們再把它轉換為十進制，就成了 0.30000000000000004。

知道了浮點數產生的原因了，那么怎么處理這個問題呢？

方法一：指定要保留的小數位數(0.1+0.2).toFixed(1) = 0.3;這個方法toFixed是進行四舍五入的也不是很精准，對於計算金額這種嚴謹的問題，不推薦使用，而且不同瀏覽器對toFixed的計算結果也存在差異。

方法二：把需要計算的數字升級（乘以10的n次冪）成計算機能夠精確識別的整數，等計算完畢再降級（除以10的n次冪），這是大部分編程語言處理精度差異的通用方法。 

 

eg:(0.1*10 + 0.2*10) / 10 == 0.3 // true

 

網上的處理方法：

 

//加法   
Number.prototype.add = function(arg){   
        var r1,r2,m;   
        try{r1=this.toString().split(".")[1].length}catch(e){r1=0}   
        try{r2=arg.toString().split(".")[1].length}catch(e){r2=0}   
        m=Math.pow(10,Math.max(r1,r2))   
        return (this*m+arg*m)/m   
}  
//減法
Number.prototype.sub = function (arg){   
    return this.add(-arg);   
}   
//乘法
Number.prototype.mul = function (arg)   {   
    var m=0,s1=this.toString(),s2=arg.toString();   
    try{m+=s1.split(".")[1].length}catch(e){}   
    try{m+=s2.split(".")[1].length}catch(e){}   
    return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)   
}   
//除法
Number.prototype.div = function (arg){   
    var t1=0,t2=0,r1,r2;   
    try{t1=this.toString().split(".")[1].length}catch(e){}   
    try{t2=arg.toString().split(".")[1].length}catch(e){}   
    with(Math){   
        r1=Number(this.toString().replace(".",""))   
        r2=Number(arg.toString().replace(".",""))   
        return (r1/r2)*pow(10,t2-t1);   
    }   
}

 

* ** method **
 *  add / subtract / multiply /divide
 *
 * ** explame **
 *  0.1 + 0.2 == 0.30000000000000004 （多了 0.00000000000004）
 *  0.2 + 0.4 == 0.6000000000000001  （多了 0.0000000000001）
 *  19.9 * 100 == 1989.9999999999998 （少了 0.0000000000002）
 *
 * floatObj.add(0.1, 0.2) >> 0.3
 * floatObj.multiply(19.9, 100) >> 1990
 *
 */
var floatObj = function() {

    /*
     * 判斷obj是否為一個整數
     */
    function isInteger(obj) {
        return Math.floor(obj) === obj
    }

    /*
     * 將一個浮點數轉成整數，返回整數和倍數。如 3.14 >> 314，倍數是 100
     * @param floatNum {number} 小數
     * @return {object}
     *   {times:100, num: 314}
     */
    function toInteger(floatNum) {
        var ret = {times: 1, num: 0}
        if (isInteger(floatNum)) {
            ret.num = floatNum
            return ret
        }
        var strfi  = floatNum + ''
        var dotPos = strfi.indexOf('.')
        var len    = strfi.substr(dotPos+1).length
        var times  = Math.pow(10, len)
        var intNum = parseInt(floatNum * times + 0.5, 10)
        ret.times  = times
        ret.num    = intNum
        return ret
    }

    /*
     * 核心方法，實現加減乘除運算，確保不丟失精度
     * 思路：把小數放大為整數（乘），進行算術運算，再縮小為小數（除）
     *
     * @param a {number} 運算數1
     * @param b {number} 運算數2
     * @param digits {number} 精度，保留的小數點數，比如 2, 即保留為兩位小數
     * @param op {string} 運算類型，有加減乘除（add/subtract/multiply/divide）
     *
     */
    function operation(a, b, digits, op) {
        var o1 = toInteger(a)
        var o2 = toInteger(b)
        var n1 = o1.num
        var n2 = o2.num
        var t1 = o1.times
        var t2 = o2.times
        var max = t1 > t2 ? t1 : t2
        var result = null
        switch (op) {
            case 'add':
                if (t1 === t2) { // 兩個小數位數相同
                    result = n1 + n2
                } else if (t1 > t2) { // o1 小數位 大於 o2
                    result = n1 + n2 * (t1 / t2)
                } else { // o1 小數位 小於 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')
    }

    // exports
    return {
        add: add,
        subtract: subtract,
        multiply: multiply,
        divide: divide
    }
}();
toFixed的修復如下


// toFixed 修復
function toFixed(num, s) {
    var times = Math.pow(10, s)
    var des = num * times + 0.5
    des = parseInt(des, 10) / times
    return des + ''
}

參考文章：http://div.io/topic/1349

http://rockyee.iteye.com/blog/891538

http://www.zhoulujun.cn/zhoulujun/html/theory/computBase/2016_0714_7860.html#announ

http://www.zhoulujun.cn/zhoulujun/html/theory/computBase/2016_0714_7860.html#announ