最近遇到个比较奇怪的问题,js函数里传参,传一个位数比较大,打印arguments可以看到传过来的参数已经改变。

然后查了一下,发现确实是js精度丢失造成的。我的解决方法是将数字型改成字符型传输,这样就不会造成精度丢失了。如下图:

JS 数字丢失精度的原因

计算机的二进制实现和位数限制有些数无法有限表示。就像一些无理数不能有限表示,如 圆周率 3.1415926...,1.3333... 等。JS 遵循 IEEE 754 规范,采用双精度存储(double precision),占用 64 bit。如图

意义

  • 1位用来表示符号位
  • 11位用来表示指数
  • 52位表示尾数

浮点数,比如

1
2
0.1 >> 0.0001 1001 1001 1001…(1001无限循环)
0.2 >> 0.0011 0011 0011 0011…(0011无限循环)

此时只能模仿十进制进行四舍五入了,但是二进制只有 0 和 1 两个,于是变为 0 舍 1 入。这即是计算机中部分浮点数运算时出现误差,丢失精度的根本原因。

大整数的精度丢失和浮点数本质上是一样的,尾数位最大是 52 位,因此 JS 中能精准表示的最大整数是 Math.pow(2, 53),十进制即 9007199254740992。

大于 9007199254740992 的可能会丢失精度

1
2
3
9007199254740992     >> 10000000000000...000 // 共计 53 个 0
9007199254740992 + 1 >> 10000000000000...001 // 中间 52 个 0
9007199254740992 + 2 >> 10000000000000...010 // 中间 51 个 0

实际上

1
2
3
4
9007199254740992 + 1 // 丢失
9007199254740992 + 2 // 未丢失
9007199254740992 + 3 // 丢失
9007199254740992 + 4 // 未丢失

结果如图

以上,可以知道看似有穷的数字, 在计算机的二进制表示里却是无穷的,由于存储位数限制因此存在“舍去”,精度丢失就发生了。

想了解更深入的分析可以看这篇论文(又长又臭):What Every Computer Scientist Should Know About Floating-Point Arithmetic

三、解决方案

对于整数,前端出现问题的几率可能比较低,毕竟很少有业务需要需要用到超大整数,只要运算结果不超过 Math.pow(2, 53) 就不会丢失精度。

对于小数,前端出现问题的几率还是很多的,尤其在一些电商网站涉及到金额等数据。解决方式:把小数放到位整数(乘倍数),再缩小回原来倍数(除倍数)

1
2
// 0.1 + 0.2
(0.1*10 + 0.2*10) / 10 == 0.3 // true

  

js数字位数太大导致参数精度丢失问题的更多相关文章

  1. [JS] js数字位数太大导致参数精度丢失问题

    http://www.cnblogs.com/littlestart/p/6023976.html

  2. 分享工作中遇到的问题积累经验 事务日志太大导致insert不进数据

    分享工作中遇到的问题积累经验 事务日志太大导致insert不进数据 今天开发找我,说数据库insert不进数据,叫我看一下 他发了一个截图给我 然后我登录上服务器,发现了可疑的地方,而且这个数据库之前 ...

  3. [转载]JavaScript 中小数和大整数的精度丢失

    标题: JavaScript 中小数和大整数的精度丢失作者: Demon链接: http://demon.tw/copy-paste/javascript-precision.html版权: 本博客的 ...

  4. [文章存档]Azure .net WebAPP的js/css文件过大导致访问慢的解决办法

    https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-qa-j ...

  5. Android Bitmap太大导致ImageView不显示的问题

    今天做我们的智能相冊的项目时,遇到了非常奇妙的问题,当照片太大时,导致ImageView.setImageBitmap不显示,上网上搜了非常多办法.感觉都不是那么靠谱.最后使用了简单粗暴的手段: // ...

  6. 解决asp.net上传文件时文件太大导致的错误

    即使在web.config中添加了节点和设置依然是不行的,还是报文件太大的错误, <httpModules>       <add name="UploadHttpModu ...

  7. git因commit的记录太大导致push失败解决方法

    发现好像这个方法不好使.......~~!还是会失败 如果有人或者自己失误把不该同步的大文件如数据或日志或其他中间文件给commit了并且push了,然后你删掉了,但是其实他仍然在你的git记录中,你 ...

  8. Kubernetes Pod日志太大导致空间问题

    在log-driver是json-file的模式下,容器的日志存放在/var/lib/docker/containers/下面,是以container_id-json.log文件存放 但缺省方式下,l ...

  9. node_modules内容太大导致webstrom非常卡

    选中一个文件夹,例如node_modules,点击右键->mark directory as ->excluded,这样就可以把这个文件标记并排除出来,使webstorm不会扫描这个文件下 ...

随机推荐

  1. x86平台转x64平台关于内联汇编不再支持的解决

    x86平台转x64平台关于内联汇编不再支持的解决     2011/08/25   把自己碰到的问题以及解决方法给记录下来,留着备用!   工具:VS2005  编译器:cl.exe(X86 C/C+ ...

  2. sql表和字段的别名

    1. sql表和字段的别名通过关键字 AS 来指定. 2.通常,定义字段别名的 AS 关键字可以省略,但我们建议不要省略 AS 关键字.别名(alias)是 SQL 的标准语法,几乎所有的数据库系统都 ...

  3. ASP.NET 一步步开发自己的博客 .NET版(11、Web.config文件的读取和修改)

    原文:http://www.cnblogs.com/zhaopei/p/5677053.html

  4. PHP 检查并创建多级目录

    <?php //检查并创建多级目录    function checkDir($path){        $pathArray = explode('/',$path);        $no ...

  5. WPF下的仿QQ图片查看器

    本例中的大图模式使用图片控件展示,监听控件的鼠标滚轮事件和移动事件,缩略图和鹰眼模式采用装饰器对象IndicatorObject和Canvas布局.百分比使用一个定时器,根据图片的放大倍数计算具体的数 ...

  6. 惠普披甲过VR寒冬,花费巨资开发VR游戏

         2016被称为VR元年,各大公司都在积极推动该领域的研究,其中HTC.0culus.索尼的成绩是最高的,不仅推出了自家研发的头显,而且销量还很可观.惠普在VR领域自然也有所投入,但是并没有比 ...

  7. OpenGL光照和颜色

    OpenGL光照和颜色 转自:http://www.cnblogs.com/kekec/archive/2011/08/16/2140789.html OpenGL场景中模型颜色的产生,大致为如下的流 ...

  8. Self-introduction (自我介绍)

     * 姓名,本名不想这样就暴露,Rachel我英文名,不愿意叫算了,直接叫我米蟲就好了.   * 性格, 偏执一些,表里不一,表面和善,骨子倔强,我这一生都在追求高逼格,从未间断过 偶尔像个小疯子,有 ...

  9. ImageLoader

    配置ImageLoader 一般我们在使用ImageLoader的时候,需要在应用程序的入口进行它的一个配置,这个配置一般写到Application里边 * public void initImage ...

  10. java 将一张图片拷贝到另外一个地方。(IO流)

    package com.beiwo.inputstream; import java.io.FileInputStream; import java.io.FileOutputStream; impo ...