前端解决精度问题

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

尝试：

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

问题：0.1+0.2=?

let num1 = 0.1;
let num2 = 0.2;

console.log(num1 + num2); //输出num 0.30000000000000004

0.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)/10

console.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.123321
let 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.js

2. 引入：
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>

：

npm install decimal.js
const Decimal = require('decimal.js');

import Decimal from 'decimal.js';

import {Decimal} from 'decimal.js';

• 特征：

• 整数和浮点数

• 简单但功能齐全的 API

• 复制 JavaScript 和对象的许多方法 Number.prototype Math

• 还可处理十六进制、二进制和八进制值

• 比 Java 的 BigDecimal 的 JavaScript 版本更快、更小、更易于使用

• 无依赖关系

• 广泛的平台兼容性：仅使用 JavaScript 1.5 （ECMAScript 3） 功能

• 全面的 和测试集

• 在引擎盖下使用

• 包括一个 TypeScript 声明文件：

• 文档： [decimal.js API

  “decimal.js API”)

  github： [GitHub - MikeMcl/decimal.js: An arbitrary-precision Decimal type for JavaScript

  An arbitrary-precision Decimal type for JavaScript - GitHub - MikeMcl/decimal.js: An arbitrary-precision Decimal type for JavaScript

  “GitHub - MikeMcl/decimal.js: An arbitrary-precision Decimal type for JavaScript”)

  npm地址： [decimal.js - npm

  An 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.

  “decimal.js - npm”)