首页 前端开发 JavaScript 中精度问题以及解决方案

JavaScript 中精度问题以及解决方案

JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示。其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在 ES5 规范 中指出了指数位E的取值范围是 [-1074, 971]


精度问题汇总

想用有限的位来表示无穷的数字,显然是不可能的,因此会出现一些列精度问题:

  • 浮点数精度问题,比如 0.1 + 0.2 !== 0.3
  • 大数精度问题,比如 9999 9999 9999 9999 == 1000 0000 0000 0000 1
  • toFixed 四舍五入结果不准确,比如 1.335.toFixed(2) == 1.33

浮点数精度和 toFixed 其实属于同一类问题,都是由于浮点数无法精确表示引起的,如下:

(1.335).toPrecision(20);    // "1.3349999999999999645"

而关于大数精度问题,我们可以先看下面这个代码片段:

// 能精确表示的整数范围上限,S为1个0,E为11个0,S为53个1

Math.pow(2, 53) - 1 === Number.MAX_SAFE_INTEGER    // true

// 能精确表示的整数范围下限,S为1个1,E为11个0,S为53个1

-(Math.pow(2, 53) - 1) === Number.MIN_SAFE_INTEGER    // true

// 能表示的最大数字,S为1个0,E为971,S为53个1

(Math.pow(2, 53) - 1) * Math.pow(2, 971) === Number.MAX_VALUE    // true

// 能表示的最接近于0的正数,S为1个0,E为-1074,S为0

Math.pow(2, -1074) === Number.MIN_VALUE // true

通过以上可以明白,[MIN_SAFE_INTEGER, MAX_SAFE_INTEGER] 的整数都可以精确表示,但是超出这个范围的整数就不一定能精确表示。这样就会产生所谓的大数精度丢失问题。

解决思路

首先考虑的是如何解决浮点数运算的精度问题,有 3 种思路:

  • 考虑到每次浮点数运算的偏差非常小(其实不然),可以对结果进行指定精度的四舍五入,比如可以parseFloat(result.toFixed(12));
  • 将浮点数转为整数运算,再对结果做除法。比如0.1 + 0.2,可以转化为(1*2)/3
  • 把浮点数转化为字符串,模拟实际运算的过程。

先来看第一种方案,在大多数情况下,它可以得到正确结果,但是对一些极端情况,toFixed 到 12 是不够的,比如:

210000 * 10000  * 1000 * 8.2    // 17219999999999.998

parseFloat(17219999999999.998.toFixed(12));    // 17219999999999.998,而正确结果为 17220000000000

上面的情况,如果想让结果正确,需要 toFixed(2),这显然是不可接受的。

再看第二种方案,比如 number-precision 这个库就是使用的这种方案,但是这也是有问题的,比如:

// 这两个浮点数,转化为整数之后,相乘的结果已经超过了 MAX_SAFE_INTEGER

123456.789 * 123456.789     // 转化为 (123456789 * 123456789)/1000000,结果是 15241578750.19052

所以,最终考虑使用第三种方案,目前已经有了很多较为成熟的库,比如 bignumber.js,decimal.js,以及big.js等。我们可以根据自己的需求来选择对应的工具。并且,这些库不仅解决了浮点数的运算精度问题,还支持了大数运算,并且修复了原生toFixed结果不准确的问题。


题外话

还有另外一个与 JavaScript 计算相关的问题,即 Math.round(x),它虽然不会产生精度问题,但是它有一点小陷阱容易忽略。下面是它的舍入的策略:

  • 如果小数部分大于 0.5,则舍入到下一个绝对值更大的整数。
  • 如果小数部分小于 0.5,则舍入到笑一个绝对值更小的整数。
  • 如果小数部分等于 0.5,则舍入到下一个正无穷方向上的整数

所以,对 Math.round(-1.5),其结果为 -1,这可能不是我们想要的结果。

当然,上面提到的 big.js 等库,都提供了自己的 round 函数,并且可以指定舍入规则,以避免这个问题。


站心网

JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示。其中符号位 S,指数位 E,尾数..

为您推荐

.NET C# 过滤从富文本编辑器html里的Javascript脚本

富文本编辑器在允许用户输入丰富内容的同时,也带来了跨站脚本攻击(XSS)的风险。过滤提交的 HTML 中的 <script> 脚本是防止跨站脚本攻击(XSS)的关键步骤。在 .NET C# 服务端过滤 <script> 脚本主要有以下几种方..

轻松学习 JavaScript函数中的默认参数

JavaScript函数可以有默认参数值。通过默认函数参数,你可以初始化带有默认值的正式参数。如果不初始化具有某些值的参数,则该参数的默认值为undefined。请看下列代码:function foo(num1){console.log(num1);}foo()..

JavaScript API 设计原则详解

前言本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详..

JavaScript 六种继承方式

继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。原型链首先得要明白什么是原型链,在一篇文章看懂proto和prototype的关系及区别中讲得非常详细..

JavaScript 事件委托详解

基本概念事件委托,通俗地来讲,就是把一个元素响应事件(click、focus……)的函数委托到另一个元素;一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应..

JavaScript 中的遍历详解

编程这么多年,要是每次写遍历代码时都用 for 循环,真心感觉对不起 JavaScript 语言~对象遍历为了便于对象遍历的测试,我在下面定义了一个测试对象obj。测试对象// 为 Object 设置三个自定义属性(可枚举)Object.p..

值得探索的 8 个机器学习 JavaScript 框架

JavaScript开发人员倾向于寻找可用于机器学习模型训练的JavaScript框架。下面是一些机器学习算法,基于这些算法可以使用本文中列出的不同JavaScript框架来模型训练:简单的线性回归多变量线性回归逻辑回归朴素贝叶斯..

JavaScript 保留两位小数

以下我们将为大家介绍 JavaScript 保留两位小数的实现方法:四舍五入以下处理结果会四舍五入:var num =2.446242342;num = num.toFixed(2); // 输出结果为 2.45不四舍五入以下处理结果不会四舍五入:第一种,先把小数边..

JavaScript 页面跳转、页面重定向

JavaScript 实现页面跳转重定向可以使用以下两种方法:window.location.replace("url")类似 HTTP 重定向将地址替换成新 url,该方法通过指定 URL 替换当前缓存在历史里(客户端)的项目,因此当使用 replace 方法之..

在 Javascript 中 声明时用 var 与不用 var 的区别

avascript 声明变量的时候,虽然用 var 关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的。可以正常运行的代码并不代表是合适的代码。var num = 1;是在当前域中声明变量。如果在方..

javascript中call()、apply()、bind()的用法终于理解

其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解!先看明白下面:例 1obj.objAge; // 17obj.myFun() // 小张年龄 undefined例 2shows() // 盲僧 比较一下这两者 this 的差别,第一个打印里面的 this ..

5 个顶级的 JavaScript Ajax 组件和库

在这篇文章中,我们将介绍一些用于AJAX调用的最好的JS库,包括jQuery,Axios和Fetch。欢迎查看代码示例!AJAX是用来对服务器进行异步HTTP调用的一系列web开发技术客户端框架。 AJAX即Asynchronous JavaScript and XM..

5 分钟掌握 JavaScript 实用窍门

简评:一开始 JavaScript 只是为网页增添一些实时动画效果,现在 JS 已经能做到前后端通吃了,而且还是年度流行语言。本文分享几则 JS 小窍门,可以让你事半功倍 ~1. 删除数组尾部元素一个简单方法就是改变数组的len..

javascript 6种连接数组的方法和对比

在 JavaScript 中,有多种方法可以用来连接数组,以下是常见的几种:1. concat() 方法用于连接两个或多个数组,返回一个新的数组,不修改原数组。const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const result = arr..

EntityFrame(EF) SQLite常见问题和解决方案

在使用 Entity Framework (EF) SQLite 时可能遇到的一些问题,下面是一些常见的问题和对应的解决方案。1. 无法找到适配器或数据库提供程序运行 EF 时提示类似以下错误:No database provider has been configured fo..

JavaScript中字典的常用操作

字典是一种以键值对存在的数据结构,他的底层是Array数组字典初始化和数组初始化的区别:数组的初始化:var arr = [1,2,3,4,5];//使用中括号字典的初始化: var names = {“a”:“aaa”,“b”:“bbb”,“c”:“ccc”}..

通过js修改tinymce的编辑器的内容

在网页开发中,TinyMCE是一个流行的富文本编辑器。它允许用户轻松地创建和编辑HTML内容,而无需直接操作代码。然而,有时我们可能需要通过JavaScript来动态修改编辑器中的内容。本文将介绍如何使用JavaScript来修改T..

常用的javascript网页数字滚动插件

在网页开发中,数字滚动效果广泛用于展示统计数据、计数器、动画化的数字效果等。以下是几款常用的 JavaScript 数字滚动插件:1. CountUp.js简介: CountUp.js 是一个轻量级的数字滚动插件,提供平滑的数字滚动动画效..

SQL Server用UUID做主键性能问题和解决方案

在 SQL Server 中使用 UUID(全称:Universally Unique Identifier) 作为主键确实可能带来一些性能问题,特别是在大型数据库和高写入负载的场景下。以下是一些关键的性能挑战及其原因:1. 无序插入导致索引碎片化UU..

git 里的gitignore不生效的解决方案

gitignore文件可以用来忽略某些不需要放在git里的文件,但是经常我们在gitignore里写了忽略语句,但是不生效原因1. 语法错误,解决方案:再次检查语法是否写的正确, 部分语法参照下面空格不匹配任意文件,可作为分隔符,..

发表回复

返回顶部