JS toFixed(2) 返回
今天遇到一个线上生产问题,据运维人员反馈,在某界面进行计算的时候,结果出现了一个值为-0.00,本来应该是0.00,遂去查了一下问题,js前端大致代码如下:
var x=Number(document.getElementById('x').value);var y=Number(document.getElementById('y').value);var z=Number(document.getElementById('z').value);var result=document.getElementById('result');result.value=(x-y-z).toFixed(2);
当然代码没这么简单,我随便写了一段案例,也就是一个数,减去另外两个数,然后查了一下数据库获取到三个值分别为2048.04、1595.21、452.83,所以本应该是:
2048.04-1595.21-452.83=0,但结果差强人意,界面显示却是-0.00
因为计算的是跟钱相关的金额,再看使用的是number类型,所以看到这里大致猜想是丢失精度导致,因此写一个案例测试一下
<!DOCTYPE html>
<html><head> <meta charset="UTF-8" /> <title></title> <script>function cal(tty){var x=Number(document.getElementById('x').value);var y=Number(document.getElementById('y').value);var z=Number(document.getElementById('z').value);var result=document.getElementById('result');result.value=(x-y-z).toFixed(2); }</script> </head> <body> <form> <br /> 第一个数: <input type="text" id="x" value="0.3" /> <br /> 第二个数: <input type="text" id="z" value="0.2" /> <br /> 第三个数: <input type="text" id="y" value="0.1" /> <br /> 计算结果: <input id="result" type="text" /> <br /> <button type="button" id="tty" value="-" onclick="cal(this)">-</button> </form> </body>
</html>
查看结果返回-0.00
因此需要做出改造,可以引入decimal.js来实现,可以直接在gitee下载
decimal.js下载
<!DOCTYPE html>
<html><head> <meta charset="UTF-8" /> <title></title> <script type="text/javascript" src="decimal.js"></script> <script>function cal(tty){var x=Number(document.getElementById('x').value);var y=Number(document.getElementById('y').value);var z=Number(document.getElementById('z').value);var result=document.getElementById('result');var decimalTest=new Decimal(x).sub(new Decimal(y)).sub(new Decimal(z));result.value=decimalTest.toFixed(2); }
</script> </head> <body> <form> <br /> 第一个数: <input type="text" id="x" value="0.3" /> <br /> 第二个数: <input type="text" id="z" value="0.2" /> <br /> 第三个数: <input type="text" id="y" value="0.1" /> <br /> 计算结果: <input id="result" type="text" /> <br /> <button type="button" id="tty" value="-" onclick="cal(this)">-</button> </form> </body>
</html>
结果反正正常数据
JS toFixed(2) 返回
今天遇到一个线上生产问题,据运维人员反馈,在某界面进行计算的时候,结果出现了一个值为-0.00,本来应该是0.00,遂去查了一下问题,js前端大致代码如下:
var x=Number(document.getElementById('x').value);var y=Number(document.getElementById('y').value);var z=Number(document.getElementById('z').value);var result=document.getElementById('result');result.value=(x-y-z).toFixed(2);
当然代码没这么简单,我随便写了一段案例,也就是一个数,减去另外两个数,然后查了一下数据库获取到三个值分别为2048.04、1595.21、452.83,所以本应该是:
2048.04-1595.21-452.83=0,但结果差强人意,界面显示却是-0.00
因为计算的是跟钱相关的金额,再看使用的是number类型,所以看到这里大致猜想是丢失精度导致,因此写一个案例测试一下
<!DOCTYPE html>
<html><head> <meta charset="UTF-8" /> <title></title> <script>function cal(tty){var x=Number(document.getElementById('x').value);var y=Number(document.getElementById('y').value);var z=Number(document.getElementById('z').value);var result=document.getElementById('result');result.value=(x-y-z).toFixed(2); }</script> </head> <body> <form> <br /> 第一个数: <input type="text" id="x" value="0.3" /> <br /> 第二个数: <input type="text" id="z" value="0.2" /> <br /> 第三个数: <input type="text" id="y" value="0.1" /> <br /> 计算结果: <input id="result" type="text" /> <br /> <button type="button" id="tty" value="-" onclick="cal(this)">-</button> </form> </body>
</html>
查看结果返回-0.00
因此需要做出改造,可以引入decimal.js来实现,可以直接在gitee下载
decimal.js下载
<!DOCTYPE html>
<html><head> <meta charset="UTF-8" /> <title></title> <script type="text/javascript" src="decimal.js"></script> <script>function cal(tty){var x=Number(document.getElementById('x').value);var y=Number(document.getElementById('y').value);var z=Number(document.getElementById('z').value);var result=document.getElementById('result');var decimalTest=new Decimal(x).sub(new Decimal(y)).sub(new Decimal(z));result.value=decimalTest.toFixed(2); }
</script> </head> <body> <form> <br /> 第一个数: <input type="text" id="x" value="0.3" /> <br /> 第二个数: <input type="text" id="z" value="0.2" /> <br /> 第三个数: <input type="text" id="y" value="0.1" /> <br /> 计算结果: <input id="result" type="text" /> <br /> <button type="button" id="tty" value="-" onclick="cal(this)">-</button> </form> </body>
</html>
结果反正正常数据