前端解决精度问题

前端 0

在生活中我们通常0.1+0.2=0.3,但是在计算机中也是对的吗?

尝试:

都说实践才能检验真理,我们先尝试一下:

问题:0.1+0.2=?let num1 = 0.1;let num2 = 0.2;console.log(num1 + num2); //输出num 0.300000000000000040.1 + 0.2 == 0.3 返回的是 false

计算机中,数字都是以二进制的形式存储的,0.1 和 0.2 虽然在十进制中是一个有限小数,但是转化为二进制后,却是一个无限小数,这导致了在存储 0.1 和 0.2 时,其实已经存在一定的精度丢失。

在前端项目中,只要有加减乘除计算的时候,就会遇到精度问题。

解决方案:

1.扩大为整数:

因为对于整数而言,在其可以表示的数值范围内,整数的数量是有限的,所有整数都可以精确表示。但是对于浮点数而言,任意小的连续区间内都有无限的浮点数,则必然存在无限不能精确表示的数值

let a = 0.1,let b = 0.2;让a和b扩大至整数,用整数进行计算,然后再还原let c=( a*10+ b*10)/10console.log(c); //0.3

这种做法能够在一定程度上规避浮点数运算中可能出现的舍入误差.

2.截断小数点位数:

let c = 0.1 + 0.2;let sum = Math.floor(c * 1e12) console.log(sum); // 输出为:0.3 其中的1e12 为 截断小数点后12位;Math.floor(),方法为向下取整 或者也可以用Math.ceil() 或 Math.round()let num=0.123321let a = Math.floor(num * 1000) / 1000;  // 舍弃小数点后3位let b= Math.round(num * 1000) / 1000;  // 四舍五入保留小数点后3位

3.第3方库(使用decimal.js 库)

1. 安装 decimal.js 库:npm install decimal.js2. 引入:import Decimal from 'decimal.js';import {Decimal} from 'decimal.js';3. 使用 Decimal 类来进行精度处理:const num = '123456789123456789';const decimalNum = new Decimal(num);
3.1 浏览器:
<script src='path/to/decimal.js'></script><script type="module">  import Decimal from './path/to/decimal.mjs';  ...</script>
3.2节点.js:
npm install decimal.jsconst Decimal = require('decimal.js');import Decimal from 'decimal.js';import {Decimal} from 'decimal.js';
  • 特征:

  • 整数和浮点数
  • 简单但功能齐全的 API
  • 复制 JavaScript 和对象的许多方法Number.prototypeMath
  • 还可处理十六进制、二进制和八进制值
  • 比 Java 的 BigDecimal 的 JavaScript 版本更快、更小、更易于使用
  • 无依赖关系
  • 广泛的平台兼容性:仅使用 JavaScript 1.5 (ECMAScript 3) 功能
  • 全面的文档和测试集
  • 由 math.js 在引擎盖下使用
  • 包括一个 TypeScript 声明文件:decimal.d.ts(点击查看)
  • 文档:decimal.js APIicon-default.png?t=N7T8https://mikemcl.github.io/decimal.js/

    github:GitHub - MikeMcl/decimal.js: An arbitrary-precision Decimal type for JavaScriptAn arbitrary-precision Decimal type for JavaScript - GitHub - MikeMcl/decimal.js: An arbitrary-precision Decimal type for JavaScripticon-default.png?t=N7T8https://github.com/MikeMcl/decimal.js

    npm地址:decimal.js - npmAn arbitrary-precision Decimal type for JavaScript.. Latest version: 10.4.3, last published: a year ago. Start using decimal.js in your project by running `npm i decimal.js`. There are 2226 other projects in the npm registry using decimal.js.icon-default.png?t=N7T8https://www.npmjs.com/package/decimal.js

也许您对下面的内容还感兴趣: