js计算结果不精确问题解决--math.js的使用

最近在做订单相关的一个功能，涉及到金额的计算，有人建议，将计算全部抛给后端来做吧，前端就不需要再维护一套算法了，话说的在理，但是呢，想想用户体验，单价*数量=金额，当用户改变一个数量时，用户都口算出来金额了，然而页面还在请求的loading中，这也太.......

于是乎,我决定前端也维护一套算法,给用户最快的响应.页面大致如下:

正常来说,这完全不是个事,很快就全部按要求实现 了,然而,测试过程中,发现了下图:

什么?    0.14*100=14.0000000000000002     ???

开发这么多年,真的第一次遇到,于是乎开始了各种测试,各种查阅,原来是这样啊:
js计算时,会将十进制转换成二进制,再进行计算,但有些小数转换成二进制时候,出现了无限循环,由于位数有限,所以就出现了截取,所以就导致了再转化成十进制后结果的不精确.所以就出现了: 0.1+0.2 !== 0.3

不说这些废话了,直接来解决方案:

math.js 是一款功能强大，使用灵活的数学库。不过此处我只需使用加减乘除等简单的方法，需要更多者可以查阅官网

1，引入第三方的js库, math.js，

官网：http://mathjs.org/

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里的运算方式改写计算公式：比如，以前的的金额计算如下：

  item.amount = item.listPrice * item.orderNum;

     改写之后为：

 //使用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，同样能解决我们的问题，有兴趣者可以研究下