前端解决精度问题

在生活中我们通常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教程_站长资源网 » 前端解决精度问题

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买