js计算结果不精确问题解决--math.js的使用
最近在做订单相关的一个功能,涉及到金额的计算,有人建议,将计算全部抛给后端来做吧,前端就不需要再维护一套算法了,话说的在理,但是呢,想想用户体验,单价*数量=金额,当用户改变一个数量时,用户都口算出来金额了,然而页面还在请求的loading中,这也太.......
于是乎,我决定前端也维护一套算法,给用户最快的响应.页面大致如下:
正常来说,这完全不是个事,很快就全部按要求实现 了,然而,测试过程中,发现了下图:
什么? 0.14*100=14.0000000000000002 ???
开发这么多年,真的第一次遇到,于是乎开始了各种测试,各种查阅,原来是这样啊:
js计算时,会将十进制转换成二进制,再进行计算,但有些小数转换成二进制时候,出现了无限循环,由于位数有限,所以就出现了截取,所以就导致了再转化成十进制后结果的不精确.所以就出现了: 0.1+0.2 !== 0.3
不说这些废话了,直接来解决方案:
math.js 是一款功能强大,使用灵活的数学库。不过此处我只需使用加减乘除等简单的方法,需要更多者可以查阅官网
1,引入第三方的js库, math.js,
math.js的下载地址是:
https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.0/math.js。
2,在程序入口处统一配置以下math.js,
//统一配置math.js
math.config({
number: 'BigNumber',
// 'number' (default),
precision: 20
});
3,使用mathjs里的运算方式改写计算公式:比如,以前的的金额计算如下:
改写之后为:
//使用math.js转换数据类型
item.listPrice = math.bignumber(item.listPrice) ; //计算金额:金额=列表价*数量
var amountOfBigNumber = item.listPrice * item.orderNum; //转换结果类型,提取数字(不转的话,得到的是对象)
item.amount = math.number(amountOfBigNumber);
这样就不会出现误差,结果就能正常了,即 0.14 * 100 = 14 !
注:常用的几个运算方法是:
运算 | 方法名 | 参数 | 备注 |
加 |
math.add(a,b,c,...)
|
参数个数>=2 | 得到几个数字的和 |
减 |
math.subtract(a,b)
|
参数个数=2 | 得到 a-b 的结果, 不可连减 |
乘 | math.multiply(a,b,c,...) | 参数个数>=2 | 得几个参数的乘积 |
除 |
math.divide(a,b)
|
参数个数=2 | 得到 a/b 的结果 ,不可连除 |
转换为bigNumber类型 |
math.bignumber(a)
|
浮点数,进行运算时,转换成bigNumber才能保证得到精确的结果 | |
转换为数字类型 |
math.number(a)
|
bignumber为对象,此方法可以获取对象中的数字部分 |
另外,还有以款比较强大的数学库,BigNumber.js,同样能解决我们的问题,有兴趣者可以研究下
js计算结果不精确问题解决--math.js的使用的更多相关文章
- js 计算快速统计中用到的日期
前言 最近在做统计报表模块,其中查询条件用到了快速查询,主要为了方便客户统计查询常用的几个日期纬度,比如本周.上周.本月.上月.昨日. 使用js计算,主要用到了js Date. getDate().g ...
- 使用math.js进行javascript精确计算
javascript进行浮点运算会有尾差,比如算个0.1+0.7试试,得到的不是0.8 .这个问题可以使用math.js解决. Math.js是一款开源的JavaScript和Node.js数学库,用 ...
- js 数值精确运算使用math.js
javaScript 浮点数运算的精度问题 问题:编程中你可能会遇到0.1*7=0.7000000000000001; 原因:几乎所有的编程语言都采用了 IEEE-745 浮点数表示法,任何使用二进制 ...
- js计算2个日期相差的天数,两个日期相差的天数,日期相隔天数
js计算2个日期相差的天数,两个日期相差的天数,日期相隔天数 >>>>>>>>>>>>>>>>>& ...
- js计算日期相差的天数
在网站开发中,经常会遇到计算日期相差的天数,js 没有提供相应的方法,所以自己写一个,方便将来查看: 代码: function DateDiff(sDate1, sDate2, splitStr) { ...
- mathjs,math.js解决js运算精度问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js计算两个日期的天数差值
js计算两个日期的天数差值 通过两个日期计算这两个日期之间的天数差值 /** * 计算天数差的函数,通用 * @param sDate1 * @param sDate2 * @returns {Num ...
- JS计算距当前时间的时间差
/** * JS获取距当前时间差 * * @param int time JS毫秒时间戳 * */ function get_time_diff(time) { var diff = ''; var ...
- JS计算两个日期之间的天数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 理解Web路由(浅谈前后端路由与前后端渲染)
1.什么是路由? 在Web开发过程中,经常会遇到『路由』的概念.那么,到底什么是路由?简单来说,路由就是URL到函数的映射. 路由的概念最开始是由后端提出来的,在以前用模板引擎开发页面的时候,是使用路 ...
- var let const区别
var let const 可否同一作用域下声明同名变量 可以 不可以 不可以 声明的变量是否会挂载到window上 会 不会 不会 声明变量是否存在变量提升 存在 不存在(变量必须声明之后才能使 ...
- vs2015编译OBS-Studio
编译之前的准备: 系统win10 QT5.7.0 VS2015 CMake 3.13.4 obs vs2015环境依赖包:dependencies2015 obs-studio 24.0 ====== ...
- Devops(四):Docker 镜像管理
参考 <Docker中上传镜像到docker hub中> <Docker 镜像管理> <通过容器提交镜像(docker commit)以及推送镜像(docker push ...
- mysql索引原理及优化(二)
索引原理分析:数据结构 索引是最常见的慢查询优化方式其是一种优化查询的数据结构,MySql中的索引是用B+树实现,而B+树就是一种数据结构,可以优化查询速度,可以利用索引快速查找数据,优化查询. 可以 ...
- android -------- AES加密解密算法
AES加密标准又称为高级加密标准Rijndael加密法,是美国国家标准技术研究所NIST旨在取代DES的21世纪的加密标准.AES的基本要求是,采用对称分组密码体制,密钥长度可以为128.192或25 ...
- 如何打开uboot的函数debug()的开关,输出更多调试信息?
答: 有两种方法: 一. 方法一 在文件<file>.c的首行加入以下内容: #define DEBUG #undef CONFIG_LOGLEVEL #define CONFIG_LOG ...
- elementUI-tree组件 懒加载
<el-tree ref="tree" :data="menu.treeData" :props="menu.defaultProps" ...
- Spring cloud微服务安全实战-7-1章节概述
前面的章节都是围绕这微服务的安全在讲一些东西,包括微服务本身api的安全.网关的安全.怎么去做安全中心,包括认证服务器,权限的服务.权限的设计,怎么来实现SSO.然后sentinel来实现统一的熔断, ...
- [LeetCode] 267. Palindrome Permutation II 回文全排列 II
Given a string s, return all the palindromic permutations (without duplicates) of it. Return an empt ...