JavaScript：解决计算精度问题/mathjs/bignumber.js/big.js/decimal.js

Myth丶恋晨 2024-03-26 00:27 59阅读 0赞

**一、计算精度现象举例**

举例1、加法

![091c490fbcae4c88b917b442c8df45af.png][]

举例2、减法

![7a31996d3e3a474abbd9dbeee6697c1a.png][]

举例3、乘法

![b517ccb6682f4a68ae40bc2a7fb2ebec.png][]

举例3、除法

![bd2f19b00b804811bad96436ba849771.png][]

**二、JS为什么会有计算精度的问题**

> JavaScript 内部只有一种数字类型Number，也就是说，JavaScript 语言的底层根本没有整数，所有数字都是以IEEE-754标准格式64位浮点数形式储存，1与1.0是相同的。因为有些小数以二进制表示位数是无穷的。JavaScript会把超出53位之后的二进制舍弃，所以涉及小数的比较和运算要特别小心。
> 
> IEEE二进制浮点数算术标准（IEEE 754）是20世纪80年代以来最广泛使用的浮点数运算标准，为许多CPU与浮点运算器所采用。这个标准定义了表示浮点数的格式（包括负零-0）与反常值（denormal number）），一些特殊数值（无穷（Inf）与非数值（NaN）），以及这些数值的“浮点数运算符”；它也指明了四种数值舍入规则和五种例外状况（包括例外发生的时机与处理方式）。

**三、解决方法**

项目技术栈vue3+vite+ts

**3.1、方法一，同时扩大倍数再除以相同的倍数**

（x \* 10 ^ n + y \* 10 ^ n）/ 10 ^ n

0.1 +0.2
    // 0.30000000000000004
    (0.1 *10 + 0.2 *10) / 10
    // 0.3

![01691f8bb13846bd8ed9f64f8d0e241b.png][]

**3.2、方法二，toFixed保留小数位数，依然存在精度问题**

![48e6e51551e6435f9b9d6a6ff86b476b.png][]

**3.3、方法三，[mathjs - npm][]**

> pnpm add mathjs

Weekly Download 580197 （20230324）

<table> 
 <tbody> 
 <tr> 
 <td>方法</td> 
 <td style="width:139px;">运算</td> 
 <td style="width:192px;">使用</td> 
 <td style="width:241px;">运输结果</td> 
 </tr> 
 <tr> 
 <td> add </td> 
 <td style="width:139px;">加法</td> 
 <td style="width:192px;"> add(1, 2) </td> 
 <td style="width:241px;">3</td> 
 </tr> 
 <tr> 
 <td> subtract </td> 
 <td style="width:139px;">减法</td> 
 <td style="width:192px;"> subtract(2, 1) </td> 
 <td style="width:241px;">1</td> 
 </tr> 
 <tr> 
 <td> multiply </td> 
 <td style="width:139px;">乘法</td> 
 <td style="width:192px;"> multiply(2, 2) </td> 
 <td style="width:241px;">4</td> 
 </tr> 
 <tr> 
 <td> divide </td> 
 <td style="width:139px;">除法</td> 
 <td style="width:192px;"> divide(4, 2) </td> 
 <td style="width:241px;">2</td> 
 </tr> 
 <tr> 
 <td> round </td> 
 <td style="width:139px;">四舍五入</td> 
 <td style="width:192px;"> round(4.01) </td> 
 <td style="width:241px;">4</td> 
 </tr> 
 <tr> 
 <td> bignumber </td> 
 <td style="width:139px;">转换为bigNumber类型。对于具有任意精度的计算，math.js支持BigNumber数据类型，bignumber返回一个Decimal类，精度依然难以保证</td> 
 <td style="width:192px;"> bignumber(4.01) </td> 
 <td style="width:241px;"><img alt="" height="105" src="https://img-blog.csdnimg.cn/fc6dda67063a42158e1e15179b39dbea.png" width="370"></td> 
 </tr> 
 <tr> 
 <td> evaluate </td> 
 <td style="width:139px;"> 直接运算表达式 </td> 
 <td style="width:192px;"> evaluate('(4.01 + 3) / 2') </td> 
 <td style="width:241px;">3.505</td> 
 </tr> 
 <tr> 
 <td> sqrt </td> 
 <td style="width:139px;"> 平方根计算 </td> 
 <td style="width:192px;"> sqrt(4) </td> 
 <td style="width:241px;">2</td> 
 </tr> 
 <tr> 
 <td> pow </td> 
 <td style="width:139px;">x 的 y 次幂值</td> 
 <td style="width:192px;">pow(3,3)</td> 
 <td style="width:241px;">27</td> 
 </tr> 
 <tr> 
 <td> chain </td> 
 <td style="width:139px;"> 链式操作 </td> 
 <td style="width:192px;"> chain(3).add(4).multiply(2).done() </td> 
 <td style="width:241px;">14</td> 
 </tr> 
 <tr> 
 <td> atan2 </td> 
 <td style="width:139px;">返回其参数商的反正切值</td> 
 <td style="width:192px;"> atan2(15,30) </td> 
 <td style="width:241px;">0.4636476090008061</td> 
 </tr> 
 <tr> 
 <td>log</td> 
 <td style="width:139px;">返回给定数字的自然Log值(即e的底数)</td> 
 <td style="width:192px;"> log(9) </td> 
 <td style="width:241px;">2.1972245773362196</td> 
 </tr> 
 <tr> 
 <td> pi </td> 
 <td style="width:139px;">圆周率</td> 
 <td style="width:192px;"> console.log('pi:', pi) </td> 
 <td style="width:241px;">3.141592653589793</td> 
 </tr> 
 <tr> 
 <td>e</td> 
 <td style="width:139px;">欧拉常数和自然对数的基数，约为&nbsp;2.718</td> 
 <td style="width:192px;"> console.log('e:', e) </td> 
 <td style="width:241px;">2.718281828459045</td> 
 </tr> 
 <tr> 
 <td> derivative </td> 
 <td style="width:139px;">待考证</td> 
 <td style="width:192px;"> console.log('derivative:',derivative('x^2 + x', 'x')) </td> 
 <td style="width:241px;"><img alt="" height="171" src="https://img-blog.csdnimg.cn/5fe0c9f3e9ff42a68c2bc147f906d31d.png" width="628"></td> 
 </tr> 
 <tr> 
 <td> matrix </td> 
 <td style="width:139px;"> 矩阵操作 </td> 
 <td style="width:192px;"> matrix([0, 1, 2, &nbsp;3, 4]) </td> 
 <td style="width:241px;"><img alt="" height="98" src="https://img-blog.csdnimg.cn/f887ce966e9e4c76a0c53ce93c2797cd.png" width="493"></td> 
 </tr> 
 </tbody> 
</table>

**3.4、方法四，[bignumber.js - npm][]**

Weekly Download 8826960 （20230324）

> pnpm add bignumber.js

<table style="width:680px;"> 
 <tbody> 
 <tr> 
 <td colspan="4"> const num = new BigNumber(1234567890.0123456789) </td> 
 </tr> 
 <tr> 
 <td colspan="4"> const num1 = new BigNumber(123.123) </td> 
 </tr> 
 <tr> 
 <td style="width:145px;">方法</td> 
 <td style="width:79px;">运算</td> 
 <td style="width:118px;">使用</td> 
 <td style="width:337px;">运算结果</td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> toFormat </td> 
 <td style="width:79px;"> 格式化 </td> 
 <td style="width:118px;"> num.toFormat() </td> 
 <td style="width:337px;"> 1,234,567,890.0123458 保留了七位小数，第七位依据第八位四舍五入 </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> toFormat </td> 
 <td style="width:79px;"> 格式化 </td> 
 <td style="width:118px;"> num.toFormat(3) </td> 
 <td style="width:337px;"> 1,234,567,890.012 保留三位小数 </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> toFormat </td> 
 <td style="width:79px;"> 格式化 </td> 
 <td style="width:118px;"> num.toFormat(13) </td> 
 <td style="width:337px;"> 1,234,567,890.012 保留十三位小数，实际还是保留了七位小数，第七位依据第八位四舍五入，然后位数用0补足 </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> plus </td> 
 <td style="width:79px;">加法</td> 
 <td style="width:118px;"> num1.plus(1.1) </td> 
 <td style="width:337px;"><img alt="" height="86" src="https://img-blog.csdnimg.cn/9a7802f0212b481dba2c0093e1a1ee14.png" width="302"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> minus </td> 
 <td style="width:79px;">减法</td> 
 <td style="width:118px;"> num1.minus(1.1) </td> 
 <td style="width:337px;"><img alt="" height="84" src="https://img-blog.csdnimg.cn/d9afd37bb26c4d9d8419e9bc2bad7b96.png" width="299"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> times </td> 
 <td style="width:79px;">乘法</td> 
 <td style="width:118px;"> num1.times(2) </td> 
 <td style="width:337px;"><img alt="" height="90" src="https://img-blog.csdnimg.cn/14c4a49d612e4dcaa2df7040927ac472.png" width="300"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> div </td> 
 <td style="width:79px;">除法</td> 
 <td style="width:118px;"> num1.div(2) </td> 
 <td style="width:337px;"><img alt="" height="88" src="https://img-blog.csdnimg.cn/13c7a26d12ee4c2e81343e6aa645f5c4.png" width="305"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> mod </td> 
 <td style="width:79px;"> 取余 </td> 
 <td style="width:118px;"> num1.mod(2) </td> 
 <td style="width:337px;"><img alt="" height="86" src="https://img-blog.csdnimg.cn/a1ed7590174c4c619cf3af8c670e36ac.png" width="317"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.eq(y) </td> 
 <td style="width:79px;"> isEqualTo--是否相等 </td> 
 <td style="width:118px;"> num.eq(num1) </td> 
 <td style="width:337px;"> false </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.gt(y) </td> 
 <td style="width:79px;"> isGreaterThan--是否大于 </td> 
 <td style="width:118px;"> num.gt(num1) </td> 
 <td style="width:337px;"> true </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.gte(y) </td> 
 <td style="width:79px;"> isGreaterThanOrEqualTo--是否大于等于 </td> 
 <td style="width:118px;"> num.gte(num1) </td> 
 <td style="width:337px;"> true </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.lt(y) </td> 
 <td style="width:79px;"> isLessThan--是否小于 </td> 
 <td style="width:118px;"> num.lt(num1) </td> 
 <td style="width:337px;"> false </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.lte(y) </td> 
 <td style="width:79px;"> isLessThanOrEqualTo--是否小于等于 </td> 
 <td style="width:118px;"> num.lte(num1) </td> 
 <td style="width:337px;"> false </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> negated </td> 
 <td style="width:79px;"> 取非，改变数字的正负号 </td> 
 <td style="width:118px;"> num.negated() </td> 
 <td style="width:337px;"><img alt="" height="97" src="https://img-blog.csdnimg.cn/91c2fa798489481aa46db218921ae787.png" width="312"></td> 
 </tr> 
 </tbody> 
</table>

**3.5、方法五，[big.js - npm][]**

Weekly Download 21,339,420 （20230324）

> pnpm add @types/big.js

<table style="width:680px;"> 
 <tbody> 
 <tr> 
 <td colspan="4"> const num = new Big(1234567890.0123456789) </td> 
 </tr> 
 <tr> 
 <td colspan="4"> const num1 = new Big(123.123) </td> 
 </tr> 
 <tr> 
 <td style="width:145px;">方法</td> 
 <td style="width:79px;">运算</td> 
 <td style="width:118px;">使用</td> 
 <td style="width:337px;">运算结果</td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> plus </td> 
 <td style="width:79px;">加法</td> 
 <td style="width:118px;"> num1.plus(1.1) </td> 
 <td style="width:337px;"><img alt="" height="99" src="https://img-blog.csdnimg.cn/dd3915c065964ee5a006c04f39526e2e.png" width="356"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> minus </td> 
 <td style="width:79px;">减法</td> 
 <td style="width:118px;"> num1.minus(1.1) </td> 
 <td style="width:337px;"><img alt="" height="101" src="https://img-blog.csdnimg.cn/eff784ec7a9c41ccafdeefacd9cfe8cc.png" width="351"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> times </td> 
 <td style="width:79px;">乘法</td> 
 <td style="width:118px;"> num1.times(2) </td> 
 <td style="width:337px;"><img alt="" height="100" src="https://img-blog.csdnimg.cn/a1b1f4f549124296b14f52f91f375107.png" width="354"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> div </td> 
 <td style="width:79px;">除法</td> 
 <td style="width:118px;"> num1.div(2) </td> 
 <td style="width:337px;"><img alt="" height="103" src="https://img-blog.csdnimg.cn/b2f97c2cac274ba49a18013a4bbae650.png" width="360"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> mod </td> 
 <td style="width:79px;"> 取余 </td> 
 <td style="width:118px;"> num1.mod(2) </td> 
 <td style="width:337px;"><img alt="" height="104" src="https://img-blog.csdnimg.cn/80ca2a5ddb0642f686241447435180db.png" width="372"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.eq(y) </td> 
 <td style="width:79px;"> isEqualTo--是否相等 </td> 
 <td style="width:118px;"> num.eq(num1) </td> 
 <td style="width:337px;"> false </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.gt(y) </td> 
 <td style="width:79px;"> isGreaterThan--是否大于 </td> 
 <td style="width:118px;"> num.gt(num1) </td> 
 <td style="width:337px;"> true </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.gte(y) </td> 
 <td style="width:79px;"> isGreaterThanOrEqualTo--是否大于等于 </td> 
 <td style="width:118px;"> num.gte(num1) </td> 
 <td style="width:337px;"> true </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.lt(y) </td> 
 <td style="width:79px;"> isLessThan--是否小于 </td> 
 <td style="width:118px;"> num.lt(num1) </td> 
 <td style="width:337px;"> false </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.lte(y) </td> 
 <td style="width:79px;"> isLessThanOrEqualTo--是否小于等于 </td> 
 <td style="width:118px;"> num.lte(num1) </td> 
 <td style="width:337px;"> false </td> 
 </tr> 
 </tbody> 
</table>

**3.6、方法六，[decimal.js - npm][]**

Weekly Download 16,251,713 （20230324）

> pnpm add decimal.js

<table style="width:680px;"> 
 <tbody> 
 <tr> 
 <td colspan="4"> &nbsp;const num = new Big(1234567890.0123456789) </td> 
 </tr> 
 <tr> 
 <td colspan="4"> const num1 = new Big(123.123) </td> 
 </tr> 
 <tr> 
 <td style="width:145px;">方法</td> 
 <td style="width:163px;">运算</td> 
 <td style="width:154px;">使用</td> 
 <td style="width:337px;">运算结果</td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> plus </td> 
 <td style="width:163px;">加法</td> 
 <td style="width:154px;"> num1.plus(new Decimal(1.1)) </td> 
 <td style="width:337px;"><img alt="" height="101" src="https://img-blog.csdnimg.cn/c9411c70cbfe46f8bc550ff6ffe883ae.png" width="386"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> minus </td> 
 <td style="width:163px;">减法</td> 
 <td style="width:154px;"> num1.minus(new Decimal(1.1)) </td> 
 <td style="width:337px;"><img alt="" height="102" src="https://img-blog.csdnimg.cn/b4ea64a1a080479392e33f9b78e1efa5.png" width="377"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> times </td> 
 <td style="width:163px;">乘法</td> 
 <td style="width:154px;"> num1.times(new Decimal(2)) </td> 
 <td style="width:337px;"><img alt="" height="100" src="https://img-blog.csdnimg.cn/023a7f4d6c6944dbba622d037f0159e6.png" width="383"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> div </td> 
 <td style="width:163px;">除法</td> 
 <td style="width:154px;"> num1.div(new Decimal(2)) </td> 
 <td style="width:337px;"><img alt="" height="102" src="https://img-blog.csdnimg.cn/0d093813910c4f74a2e94b7ee1438294.png" width="382"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> mod </td> 
 <td style="width:163px;"> 取余 </td> 
 <td style="width:154px;"> num1.mod(new Decimal(2)) </td> 
 <td style="width:337px;"><img alt="" height="106" src="https://img-blog.csdnimg.cn/e9762da0bdd54325ba409785476336ae.png" width="401"></td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.eq(y) </td> 
 <td style="width:163px;"> isEqualTo--是否相等 </td> 
 <td style="width:154px;"> num.eq(num1) </td> 
 <td style="width:337px;"> false </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.gt(y) </td> 
 <td style="width:163px;"> isGreaterThan--是否大于 </td> 
 <td style="width:154px;"> num.gt(num1) </td> 
 <td style="width:337px;"> true </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.gte(y) </td> 
 <td style="width:163px;"> isGreaterThanOrEqualTo--是否大于等于 </td> 
 <td style="width:154px;"> num.gte(num1) </td> 
 <td style="width:337px;"> true </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.lt(y) </td> 
 <td style="width:163px;"> isLessThan--是否小于 </td> 
 <td style="width:154px;"> num.lt(num1) </td> 
 <td style="width:337px;"> false </td> 
 </tr> 
 <tr> 
 <td style="width:145px;"> x.lte(y) </td> 
 <td style="width:163px;"> isLessThanOrEqualTo--是否小于等于 </td> 
 <td style="width:154px;"> num.lte(num1) </td> 
 <td style="width:337px;"> false </td> 
 </tr> 
 </tbody> 
</table>

**四、欢迎交流指正，关注我，一起学习。**

**参考链接：**

[JavaScript Math 参考手册][JavaScript Math]

[091c490fbcae4c88b917b442c8df45af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ca26e2d0c9f74f658abf99970cdee9fd.png
[7a31996d3e3a474abbd9dbeee6697c1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5c3038f1d77e4f309bd26689305deb19.png
[b517ccb6682f4a68ae40bc2a7fb2ebec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/27ec5c0539824433afee8e37e0daa780.png
[bd2f19b00b804811bad96436ba849771.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9b167a84124f4a5492734dcb4f11074c.png
[01691f8bb13846bd8ed9f64f8d0e241b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/db04fd01eab44daea6414d76f235171c.png
[48e6e51551e6435f9b9d6a6ff86b476b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b115bd73e7dc443981e8a1fac7c9c8fa.png
[mathjs - npm]: https://www.npmjs.com/package/mathjs
[bignumber.js - npm]: https://www.npmjs.com/package/bignumber.js
[big.js - npm]: https://www.npmjs.com/package/big.js
[decimal.js - npm]: https://www.npmjs.com/package/decimal.js
[JavaScript Math]: https://www.w3school.com.cn/jsref/jsref_obj_math.asp