javascript避免数字计算精度误差的方法详解

如果我问你 0.1 + 0.2 等于几？你可能会送我一个白眼，0.1 + 0.2 = 0.3 啊，那还用问吗？连幼儿园的小朋友都会回答这么小儿科的问题了。但是你知道吗，同样的问题放在编程语言中，或许就不是想象中那么简单的事儿了。
不信？我们先来看一段 JS。

var numA = 0.1;
var numB = 0.2;
alert( (numA + numB) === 0.3 );

执行结果是 false。没错，当我第一次看到这段代码时，我也理所当然地以为它是 true，但是执行结果让我大跌眼镜，是我的打开方式不对吗？非也非也。我们再执行以下代码试试就知道结果为什么是 false 了。

var numA = 0.1;
var numB = 0.2;
alert( numA + numB );

原来，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…（无限循环）

双精度浮点数的小数部分最多支持 52 位，所以两者相加之后得到这么一串 0.0100110011001100110011001100110011001100110011001100 因浮点数小数位的限制而截断的二进制数字，这时候，我们再把它转换为十进制，就成了 0.30000000000000004。

原来如此，那怎么解决这个问题呢？我想要的结果就是 0.1 + 0.2 === 0.3 啊！！！

有种最简单的解决方案，就是给出明确的精度要求，在返回值的过程中，计算机会自动四舍五入，比如：

var numA = 0.1;
var numB = 0.2;
alert( parseFloat((numA + numB).toFixed(2)) === 0.3 );

但是明显这不是一劳永逸的方法，如果有一个方法能帮我们解决这些浮点数的精度问题，那该多好。我们来试试下面这个方法：

Math.formatFloat = function(f, digit) {
    var m = Math.pow(10, digit);
    return parseInt(f * m, 10) / m;
}

var numA = 0.1;
var numB = 0.2;

alert(Math.formatFloat(numA + numB, 1) === 0.3);

这个方法是什么意思呢？为了避免产生精度差异，我们要把需要计算的数字乘以 10 的 n 次幂，换算成计算机能够精确识别的整数，然后再除以 10 的 n 次幂，大部分编程语言都是这样处理精度差异的，我们就借用过来处理一下 JS 中的浮点数精度误差。

如果下次再有人问你 0.1 + 0.2 等于几，你可要小心回答咯！！

赞 (0)

相关推荐

  • js数字舍入误差以及解决方法(必看篇)

    js数字舍入误差以及解决方法(必看篇)

    1.起因: 返回结果是true. 2.原因:计算机的二进制实现和位数限制有些数无法有限表示.就像一些无理数不能有限表示,如 圆周率 3.1415926...,1.3333... 等.JS 遵循 IEEE 754 规范,采用双精度存储(double precision),占用 64 bit. 3.解决方法 (1)toFixed(),存在兼容性(chrome) (2)比较稳妥方法(数字如果过大,也会有误差): *JS 中能精准表示的最大整数是 Math.pow(2, 53),十进制即 9007199

  • 解决JavaScript数字精度丢失问题的方法

    解决JavaScript数字精度丢失问题的方法

    本文分为三个部分 JS 数字精度丢失的一些典型问题 JS 数字精度丢失的原因 解决方案(一个对象+一个函数) 一.JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加 0.1 + 0.2 != 0.3 // true 这真不是 Firebug 的问题,可以用alert试试 (哈哈开玩笑). 看看Java的运算结果 再看看Python 2. 大整数运算 16位和17位数竟然相等,没天理啊. 又如 var x = 9007199254740992 x + 1 == x // ? 看结果 三观又

  • js数字计算 误差问题的快速解决方法

    实例如下: //加法函数,用来得到精确的加法结果 //说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. //调用:accAdd(arg1,arg2) //返回值:arg1加上arg2的精确结果 function add(a,b){ var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) { c = 0; } try { d = b.toSt

  • javascript避免数字计算精度误差的方法详解

    如果我问你 0.1 + 0.2 等于几?你可能会送我一个白眼,0.1 + 0.2 = 0.3 啊,那还用问吗?连幼儿园的小朋友都会回答这么小儿科的问题了.但是你知道吗,同样的问题放在编程语言中,或许就不是想象中那么简单的事儿了.不信?我们先来看一段 JS. var numA = 0.1; var numB = 0.2; alert( (numA + numB) === 0.3 ); 执行结果是 false.没错,当我第一次看到这段代码时,我也理所当然地以为它是 true,但是执行结果让我大跌眼镜

  • JavaScript中windows.open()、windows.close()方法详解

    windows.open()方法详解: window.open(URL,name,features,replace)用于载入指定的URL到新的或已存在的窗口中,并返回代表新窗口的Window对象.它有4个可选的 参数: URL:一个可选的字符串,声明了要在新窗口中显示的文档的 URL.如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档. name:一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字.字母和下划线,该字符声明了新窗口的名称.这个名称可以用作标记

  • 对python 判断数字是否小于0的方法详解

    为了精度更准确 可以使用数字的绝对值 < 1.0e-16  或者 < 1.0e-8来对比 abs(Num) <  1.0e-16 以上这篇对python 判断数字是否小于0的方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JavaScript判断两个值相等的方法详解

    JavaScript判断两个值相等的方法详解

    目录 前言 非严格相等 严格相等 同值零 同值 总结 前言 在 JavaScript 中如何判断两个值相等,这个问题看起来非常简单,但并非如此,在 JavaScript 中存在 4 种不同的相等逻辑,如果你不知道他们的区别,或者认为判断相等非常简单,那么本文非常适合你阅读. ECMAScript 是 JavaScript 的语言规范,在ECMAScript 规范中存在四种相等算法,如下图所示: 上图中四种算法对应的中文名字如下,大部分前端应该熟悉严格相等和非严格相等,但对于同值零和同值却不熟悉,

  • 基于JavaScript中字符串的match与replace方法(详解)

    基于JavaScript中字符串的match与replace方法(详解)

    1.match方法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. match()方法的返回值为:存放匹配结果的数组. 2.replace方法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace方法的返回值为:一个新的字符串. 3.说明 以上2个方法的参数在使用正则表达式时主要添加全局g,这样才能对字符串进行全部匹配或者替换. 示例代码: <!DOCTYPE html> <html lang

  • JavaScript实现事件总线(Event Bus)的方法详解

    JavaScript实现事件总线(Event Bus)的方法详解

    目录 介绍 原理 分析 进阶 1. 如何在发送消息时传递参数 2. 订阅后如何取消订阅 3. 如何只订阅一次 4. 如何清除某个事件或者所有事件 5. TypeScript 版本 6. 单例模式 总结 介绍 Event Bus 事件总线,通常作为多个模块间的通信机制,相当于一个事件管理中心,一个模块发送消息,其它模块接受消息,就达到了通信的作用. 比如,Vue 组件间的数据传递可以使用一个 Event Bus 来通信,也可以用作微内核插件系统中的插件和核心通信. 原理 Event Bus 本质上

  • JavaScript React如何修改默认端口号方法详解

    问题 我们在使用React的时候经常会遇到这种情况,3000端口号被占用.有时候可以关掉3000端口,但更多时候,我们需要打开多个项目的时候,就必须要开启多个端口了.这时候就需要修改默认端口号了. 解决办法 修改默认端口号 具体做法 第一步:找到start.js文件 这个文件的位置在:node_modules文件夹下 -> react-scripts文件夹下 -> scripts文件夹下 -> start.js node_modules下 start.js文件 51行处修改,整个文件端口

  • JavaScript定义及输出螺旋矩阵的方法详解

    JavaScript定义及输出螺旋矩阵的方法详解

    本文实例讲述了JavaScript定义及输出螺旋矩阵的方法.分享给大家供大家参考,具体如下: 昨晚无意看到这样一个算法题目,然后就想着用js来实现. 昨晚草草写完后感觉代码很丑,很臭,于是今晚又花点时间重构了一下,感觉变得优雅了. 什么是螺旋矩阵 螺旋矩阵是指一个呈螺旋状的矩阵,它的数字由第一行开始到右边不断变大,向下变大,向左变大,向上变大,如此循环. 如图: 实现效果 实现代码 (function() { var map = (function() { function map(n) { t

  • JavaScript链式调用原理与实现方法详解

    本文实例讲述了JavaScript链式调用原理与实现方法.分享给大家供大家参考,具体如下: 1.什么是链式调用? 这个很容易理解,例如 $('text').setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:链式调用完方法后,return this返回当前调用方法的对象. 首先,我们先来看看一般函数的调用方式 (1)先创建一个简单的类 //创建一个bird类 function Bird(name) { this.name=name; this.run

  • C语言中字符的输入输出以及计算字符个数的方法详解

    C语言中字符的输入输出以及计算字符个数的方法详解

    C语言字符输入与输出 标准库提供的输入/输出模型非常简单.无论文本从何处输入,输出到何处,其输入/输出都是按照字符流的方式处理.文本流是由多行字符构成的字符序列,而每行字符则由 0 个或多个字符组成,行末是一个换行符.标准库负责使每个输入/输出流都能够遵守这一模型.使用标准库的 C 语言程序员不必关心在程序之外这些行是如何表示的. 标准库提供了一次读/写一个字符的函数,其中最简单的是 getchar 和 putchar 两个函数.每次调用时,getchar 函数从文本流中读入下一个输入字符,并将

随机推荐