JavaScript数字精度丢失问题总结
本文分为三个部分
- JS 数字精度丢失的一些典型问题
- JS 数字精度丢失的原因
- 解决方案(一个对象+一个函数)
一、JS数字精度丢失的一些典型问题
1. 两个简单的浮点数相加
1
|
0.1 + 0.2 != 0.3 // true
|
Firebug
这真不是 Firebug 的问题,可以用alert试试 (哈哈开玩笑)。
看看Java的运算结果
再看看Python
2. 大整数运算
1
|
9999999999999999 == 10000000000000001 // ?
|
Firebug
16位和17位数竟然相等,没天理啊。
又如
1
2
|
var x = 9007199254740992
x + 1 == x // ?
|
看结果
三观又被颠覆了。
3. toFixed 不会四舍五入(Chrome)
1
|
1.335.toFixed(2) // 1.33
|
Firebug
线上曾经发生过 Chrome 中价格和其它浏览器不一致,正是因为 toFixed 兼容性问题导致
二、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
|
以下是我写了一个对象,对小数的加减乘除运算丢失精度做了屏蔽。当然转换后的整数依然不能超过 9007199254740992。
例如
28613750103206269 + 1 == 28613750103206269
toFixed的修复如下
1
2
3
4
5
6
7
|
// toFixed 修复 function toFixed(num, s) {
var times = Math.pow(10, s)
var des = num * times + 0.5
des = parseInt(des, 10) / times
return des + ''
} |
相关推荐
NULL 博文链接:https://hejie084.iteye.com/blog/1260556
javascript小数精度丢失的完美解决方法.docx
主要介绍了javascript解决小数的加减乘除精度丢失的方案的相关资料以及JavaScript中关于丢失数字精度的问题的探讨,非常的详细,需要的朋友可以参考下
JS 数字精度丢失的一些典型问题 JS 数字精度丢失的原因 解决方案(一个对象+一个函数) 一、JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加 0.1 + 0.2 != 0.3 // true 这真不是 Firebug 的问题,可以用...
下面小编就为大家带来一篇javascript小数精度丢失的完美解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
javascript解决小数的加减乘除精度丢失的方案.docx
浅谈JavaScript中小数和大整数的精度丢失_.docx
代码如下: /** * 加法运算,避免数据相加小数点后产生多位数和计算精度损失。 * * @param num1加数1 | num2加数2 */ function numAdd(num1, num2) { var baseNum, baseNum1, baseNum2; try { baseNum
使用示例: math.config({ number:'BigNumber' }) let result=math.parser().eval(a+ "-" + b); //a,b是需要计算的值,中间是运算符
首先来看一下JavaScript中的数字类型的存储情况 ①JS中所有的数字(小数、整型)都是浮点型 ②JS中小数、整型都是Number类型 ...知道Number的具体存储特征后,我们再来分析一下小数精度丢失的原因 小数进行算术
先来看两个问题: ...JavaScript 中的数字是用 IEEE 754 双精度 64 位浮点数 来存储的,其格式为: s x m x 2^e s 是符号位,表示正负。 m 是尾数,有 52 bits. e 是指数,有 11 bits. 在 ECMAScript 规
javascript中的parseFloat()方法,大家应该不陌生吧,下面为大家介绍下其精度问题,感兴趣的朋友不要错过
springboot,jackson,JavaScript,前端数字精度丢失
JavaScript小数在做四则运算时,精度会丢失,这会在项目中引起诸多不便,先请看下面脚本。
其实在我们使用正常的 + - * / 运算时,在某些情况下就会出现精度丢失的问题,如金额过大时,单纯的加减都有可能出现精度丢失,对于银行项目来说,是很敏感的,需要对每个加减乘除都进行一次方法处理,为此我整理...
Javascript 和大部分语言一样在浮点数运算时,经常出现精度丢失的问题,由于现在的大量Web项目经常涉及到货币计算或数学高级计算,此插件提供简单浮点运算,浮点存储格式符合IEEE754计算机