JS浮点型的运算精度问题

精度问题

大家一定遇到过这种问题:

    console.log(0.1 + 0.2);//0.30000000000000004
    console.log(2.22 + 0.1);// 2.3200000000000003
    console.log(1.0 - 0.9);//0.09999999999999998
    console.log(19.9 * 100);//1989.9999999999998
    console.log(6.6 / 0.2);//32.99999999999999

这真是一个令人黯然蛋碎的bug,而且即使在es6时代依然没能解决,怎么办呢?只能靠自己了。
为什么出现这个问题呢?
我们生活中用到的十进制计算,在计算机底层都会将其转为二进制运算。我们把0.1转为二进制,其实是:
0.1 => 0.0001 1001 1001 1001…(无限循环)
这就是浮点型数值计算不准确的原因。

解决方案

既然浮点型直接计算会出问题,那么我们就换种思路,可以将其先转为整型计算,然后再转回去。
比如0.1+0.2,我们完全可以先都扩大10倍,相加得3,然后除以10,不就得到0.3这个准确数值了么?
根据这个思路,我们写出如下代码:

(function (Number) {
    //加法
    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)) // 按小数位多的那个扩大倍数
        var a = this * m 
        var b = arg * m
        return (a + b) / m
    }
})(Number)

代码很简单我们不做过多解释,直接看结果吧:

console.log(0.1 + 0.2) // 0.30000000000000004
console.log((0.1).add(0.2)) // 0.3

ok,貌似大功告成哈?别着急,咱们再看个例子:

console.log(2.22 + 0.1) // 2.3200000000000003
console.log((2.22).add(0.1)) // 2.3200000000000003

卧槽?神马情况这是?不科学啊~~
其实我们忽略了一个重要问题,那就是——浮点乘法也会有精度问题!!

console.log(2.22*100) //222.00000000000003
console.log(19.9 * 100);//1989.9999999999998

愁人不?太愁人了!!咋办呢?
别急,有办法。
我们的目标,就是要保证扩大倍数后得到的整数一定要准确,我们是否可以通过parseInt函数,对乘法结果直接取整呢?
如果是2.22x100,parseInt取整得到222,这是准确的;然鹅,19.9x100,取整就是1989,正确的结果应该是1990,这就不对了。
怎么就能让它对呢?
咱们可以这样:
将乘法得到的数值,再加个0.5,然后再取整,以保障整数的准确。
为啥要加0.5呢?
答案是:0.5会保证四舍五入。

    console.log(2.22*100+0.5) //222.50000000000003
    console.log(19.9 * 100+0.5);//1990.4999999999998

这样一来,parseInt取整不就对了么。
好的,我们将之前的代码做一下修正:

    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))  // 取位数最大的那个
        var a = parseInt(this * m + 0.5)
        var b = parseInt(arg * m + 0.5)

        return (a + b) / m
    }

然后再看看结果:

    console.log(0.1 + 0.2);//0.30000000000000004
    console.log(2.22 + 0.1);// 2.3200000000000003
   console.log((0.1).add(0.2)) // 0.3
   console.log((2.22).add(0.1)) // 2.32

好,下面我们继续把减法、乘法和除法都补全。
减法其实很简单,加一个负数不就是减法了嘛~~

    Number.prototype.sub = function (arg) {
        return this.add(-arg);
    }

然后是乘法。
乘法思路也很简单,比如3.15x7.2,其实可以这么计算:
(315x72)/1000
对吧?
也就是说,我们可以先去掉他们的小数点,先转为整数乘法,然后再将结果缩小n倍。
于是我们写出如下代码:

    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 // m是累加结果
        } catch (e) {
        }
        return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m) // 直接去掉小数点,转为整型计算,最后缩小n倍
    }

最后是除法。
我们举个例子,比如:1.5/0.21,还记得小学除法老师是怎么教的来着?
是不是把分子分母同时都扩大n倍,然后相除呢?也就是:150/21
但我们前面说过,浮点型直接扩大整数倍,也会产生精度问题,这个问题要注意。
好,顺着这个思路,我们可以轻松写出代码:

    Number.prototype.div = 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))
        var a = parseInt(this * m + 0.5)
        var b = parseInt(arg * m + 0.5)
        return a/b
    }

完整代码

(function (Number) {
    //加法
    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))
        var a = parseInt(this * m + 0.5)
        var b = parseInt(arg * m + 0.5)
        return (a + b) / 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 // m是累加结果
        } catch (e) {
        }
        return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
    }

//除法
    Number.prototype.div = 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))
        var a = parseInt(this * m + 0.5)
        var b = parseInt(arg * m + 0.5)
        return a/b
    }
})(Number)
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,366评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,521评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,689评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,925评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,942评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,727评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,447评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,349评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,820评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,812评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,471评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2 355

推荐阅读更多精彩内容

  • 运算符是处理数据的基本方法,用来从现有的值得到新的值。JavaScript 提供了多种运算符,本章逐一介绍这些运算...
    许先生__阅读 605评论 0 3
  • 定点小数运算 来自:http://www.eepw.com.cn/article/17893.htm 在DSP世界...
    郝宇峰阅读 9,130评论 0 2
  • 运算符是处理数据的基本方法,用来从现有的值得到新的值。JavaScript 提供了多种运算符,本章逐一介绍这些运算...
    徵羽kid阅读 680评论 0 0
  • 目录 一,浮点数精度丢失? 二,整数的二进制表示 三,浮点数的二进制表示 四,iEEE 754浮点数的手动转换 五...
    杨小黑阅读 10,009评论 3 25
  • 背景 在java中float赋值给double,会产生精度问题。 输出为2.0999999046325684。 小...
    我叫小小强阅读 19,218评论 2 23