前端解决精度问题-前端-CSS教程

在生活中我们通常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>

3.2节点.js：

npm install decimal.js
const 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 APIhttps://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 JavaScripthttps://github.***/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.https://www.npmjs.***/package/decimal.js

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端解决精度问题

dd凯

分享到：

尝试：