JS浮点数精度问题

在JavaScript开发中,浮点数精度问题是一个常见的陷阱。本文将深入探讨JavaScript中浮点数精度问题的原因、影响以及解决方案。

一、浮点数精度常见问题

(一)加法运算

js 复制代码
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.7 + 0.1); // 0.7999999999999999
console.log(0.2 + 0.4); // 0.6000000000000001
console.log(2.22 + 0.1); // 2.3200000000000003

(二)减法运算

js 复制代码
console.log(1.5 - 1.2); // 0.30000000000000004
console.log(0.3 - 0.2); // 0.09999999999999998

(三)乘法运算

js 复制代码
console.log(19.9 * 100); // 1989.9999999999998
console.log(19.9 * 10 * 10); // 1990
console.log(9.7 * 100); // 969.9999999999999
console.log(39.7 * 100); // 3970.0000000000005

(四)除法运算

js 复制代码
console.log(0.3 / 0.1); // 2.9999999999999996
console.log(0.69 / 10); // 0.06899999999999999

(五)四舍五入保留小数位数

js 复制代码
console.log((1.335).toFixed(2)); // 1.33

二、为什么会有这样的问题

(一)浮点数的存储方式

在JavaScript中,所有数字都以64位浮点数形式存储,即使整数也是如此。这种存储方式基于IEEE 754标准,其中64位的划分如下:

  • 符号位(1位):表示正负数,0表示正数,1表示负数。
  • 指数位(11位):表示次方数。
  • 尾数位(52位):存储小数部分,超出部分自动进一舍零。

(二)二进制表示的局限性

浮点数在计算机中以二进制形式存储,但某些十进制小数无法精确表示为二进制小数。例如,0.1和0.2在二进制中是无限循环小数,因此在存储时会被截断,导致精度丢失。

(三)JavaScript的Number类型

JavaScript中的Number类型统一按浮点数处理,整数也是按最大54位来计算的。因此,当数值超过安全范围(Number.MAX_SAFE_INTEGERNumber.MIN_SAFE_INTEGER)时,就会出现精度问题。

三、解决方案

(一)使用第三方库

为了精确处理浮点数运算,可以使用一些成熟的第三方库,如Math.jsdecimal.jsbig.js

Math.js

Math.js是一个功能强大的数学库,支持多种数据类型和操作。

js 复制代码
const math = require('mathjs');
console.log(math.add(0.1, 0.2)); // 0.3
decimal.js

decimal.js提供任意精度的十进制数值运算。

js 复制代码
const Decimal = require('decimal.js');
console.log(new Decimal(0.1).plus(0.2).toNumber()); // 0.3
big.js

big.js专注于大数运算,支持高精度的浮点数运算。

js 复制代码
const Big = require('big.js');
console.log(new Big(0.1).plus(0.2).toString()); // "0.3"

(二)自定义函数

如果不想引入第三方库,可以编写自定义函数来处理浮点数运算。以下是一个简单的加法函数示例:

js 复制代码
function add(a, b) {
    const factor = 10 ** 10;
    return (Math.round(a * factor) + Math.round(b * factor)) / factor;
}
console.log(add(0.1, 0.2)); // 0.3

(三)避免浮点数运算

在某些情况下,可以避免直接使用浮点数运算。例如,处理货币时,可以将金额转换为整数(如分)进行计算,最后再转换回浮点数。

js 复制代码
function addCents(a, b) {
    return (Math.round(a * 100) + Math.round(b * 100)) / 100;
}
console.log(addCents(0.1, 0.2)); // 0.3
相关推荐
wefly2017几秒前
告别本地环境!m3u8live.cn一键实现 M3U8 链接预览与调试
前端·后端·python·音视频·m3u8·前端开发工具
SuperEugene3 分钟前
前端 console 日志规范实战:高效调试 / 垃圾 log 清理与线上安全避坑|编码语法规范篇
开发语言·前端·javascript·vue.js·安全
程序员敲代码吗3 分钟前
USB-C接口深度测试:从Vconn到电压的全方位分析
c语言·开发语言
武藤一雄12 分钟前
C#常见面试题100问 (第一弹)
windows·microsoft·面试·c#·.net·.netcore
racerun12 分钟前
跳转链接批量解析工具 python
开发语言·python
发现一只大呆瓜13 分钟前
Vue - @ 事件指南:原生 / 内置 / 自定义事件全解析
前端·vue.js·面试
庄小焱21 分钟前
React——React基础语法(1)
前端·javascript·vue.js
qq_4176950530 分钟前
C++中的解释器模式
开发语言·c++·算法
pingan87871 小时前
试试 docx.js 一键生成 Word 文档,效果很不错
开发语言·前端·javascript·ecmascript·word
big_rabbit05021 小时前
java面试题整理
java·开发语言