一直知道js的浮点数计算是不精确的, 0.1 + 0.2 !== 0.3,但是也就知道而已,解决方法却不怎么注意,所以刚做一个项目,尽管了解浮点数精度不精确的问题,但是还是掉坑里了。在此再次默默告诉自己要警惕,端正心态,不可掉以轻心!!!所以下面就分享一些加减乘除的方法。
原理: 把数字转换成字符串,然后从小数点部分切割成两部分,分别算出两个因数的小数点右边的长度,然后用两个因数的小数点右边长度最大的数再乘以10,相当于两个都放大了n倍,然后相加,然后缩小n倍。
注意,这里的放大用了乘法times函数(下面介绍),因为浮点数直接乘以100有可能出现精度不够的情况,如下图
原理和加法一样,放大n倍后相减再缩小n倍
乘法原理稍微变点,放大倍数n是 ‘两个小数点后面长度之和’ 而不是 ‘两个小数点后面长度这两者之间的最大值’
除法原理和乘法一样
这也是一个坑,比如你要保留两位小数,四舍五入的话就要看小数点第三位后面的数字来决定,如2.445四舍五入后就是2.45; 2.444四舍五入就是2.44;做这个需求的时候,我第一反应是Math.toFixed(2),结果是bug百出啊,这里就不举例了,有兴趣可以自己尝试。然后我是怎么解决的呢?百度了一下,也是得到一些半成品不严谨的函数,原理也很简单,先放大倍数,然后利用Math.round()取整
以上加减乘除方法基本满足一般业务需求了,尤其是电商。但是如果数字计算时超出了 2的1024次方减1 ,也就是 9007199254740992 这个数字的话就不适合了,因为从 2^1024 开始就变成了 Infinity。
// js小数加减乘除时精度修正
export const floatObj = function () {
//加法
function add(a,b){
return math.number(math.add(math.bignumber(a), math.bignumber(b)))
}
//减法
function subtract(a,b){
return math.number(math.subtract(math.bignumber(a), math.bignumber(b)))
}
// 乘法
function multiply(a,b){
return math.number(math.multiply(math.bignumber(a), math.bignumber(b)))
}
// 除法
function divide(a,b){
let num
a==0||b==0? num = 0 : num = math.number(math.divide(math.bignumber(a), math.bignumber(b)))
return num
}
//四舍五入并保留n位小数(isRound是否四舍五入)
function fomatFloat(num,n,isRound){
var f = parseFloat(num)
if(isNaN(f)){
return false
}
f = Math.round(num*Math.pow(10, isRound?n:n+1))/Math.pow(10, isRound?n:n+1) // n 幂
var s = f.toString()
var rs = s.indexOf('.')
//判定如果是整数,增加小数点再补0
if(rs < 0){
rs = s.length
s += '.'
}
while(s.length <= rs + n){
s += '0'
}
let _s = s.split(".")[0] + '.' + (s.split(".")[1].substr(0,n))
return Number(isRound?s:_s)
}
return {
add: add,
subtract: subtract,
multiply: multiply,
divide: divide,
fomatFloat
}
}()
//html<input type="text" id="num1" value="" />
<select id="mySelect">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2" value="" />
<input type="button" id="jisuan" value="计算" />
//js
<script>
var oTxt1 = document.getElementById('num1')
var oTxt2 = document.getElementById('num2')
var oSelect = document.getElementById('mySelect')
var oBtn = document.getElementById('jisuan')
oBtn.onclick=function(){
switch(oSelect.value){
case '+':
alert(parseInt(oTxt1.value)+parseInt(oTxt2.value))
break
case '-':
alert(parseInt(oTxt1.value)-parseInt(oTxt2.value))
break
case '*':
alert(parseInt(oTxt1.value)*parseInt(oTxt2.value))
break
case '/':
if(parseInt(oTxt2.value) !== 0){
alert(parseInt(oTxt1.value)/parseInt(oTxt2.value))
}else{
alert('除数不能为0')
}
break
default:
alert('Bug!!!')
}
}
</script>