最新消息: USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。

JS toFixed(2) 返回

互联网 admin 0浏览 0评论

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>

结果反正正常数据 

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论