JS精度问题终结者--math.js之Vue中使用心得

大家有没有遇到过很奇怪的问题在js中0.1+0.2却不等于0.3

0.1+0.2
0.30000000000000004

这尼玛很尴尬了就，原来是二进制搞的鬼。。（具体原因不说了，想了解的自行百度就好了）
出现问题就要想解决办法的，这就是math.js出场的原因。

首先
引入math.js

npm install mathjs

其次
在Vue组建中引入

let math = require('mathjs');

最后
当然是使用了
其中最强大的就是链式写法
UI层

<ul>
   <li v-for="(item,index) in (this.accountList)" :key="index">
     <p class="coinName">{{item.coin_type | coinType}}p>
     <div class="useFreeze">
       <p>{{useable(item) | toFix}} <span>可用span>p>
       <p>{{item.frozen_amount | toFix}} <span>冻结span>p>
     div>
   li>
ul>

逻辑层

methods{
    useable(item){
      return math.format(math.chain(math.bignumber(item.amount)).subtract(math.bignumber(item.frozen_amount)).done());
    }
}

这是我自己写的方法，是解决减法中出现的精度问题。
这里做一些说明
math.format()的作用是类似toString()的作用，文章出自于
详见http://mathjs.org/docs/core/chaining.html （在文章的最下边有提到）

math.chain(math.bignumber()).subtract(math.bignumber()).done();

math.bignumber()转换成四舍五入的数或者将字符串转换成数字。
详见http://mathjs.org/docs/datatypes/bignumbers.html （在文章的下部）

还要说一下 add（加）、 subtract（减）、multiply（乘）、divide（除）

举个小栗子

0.1＋0.2
math.format(math.chain(math.bignumber(0.1)).add(math.bignumber(0.2)).done());

0.2-0.1
math.format(math.chain(math.bignumber(0.2)).subtract(math.bignumber(0.1)).done());

0.1*0.2
math.format(math.chain(math.bignumber(0.1)).multiply(math.bignumber(0.2)).done());

0.1/0.2
math.format(math.chain(math.bignumber(0.1)).divide(math.bignumber(0.2)).done());

如果大家想深如了解，具体大家就可以自行访问github和官网即可。

另附链接
https://github.com/josdejong/mathjs gitHub上项目
http://mathjs.org/index.html 官网