本文作者为 360 奇舞团前端开发工程师

在运用 JavaScript 处理运算时，有时会碰到数字运算成果不符合预期的情况，比方经典的 0.1 + 0.2 不等于 0.3。当然这种问题不只存在于 JavaScript，不过编程语言的一些原理大致相通，我以 JavaScript 为例解说这种问题，并说明前端怎么尽可能确保数字精确。

let a = 0.1,b=0.2,c=0.3
console.log(a + b === c) //false

1. 核算机数字怎么存储

理解类似问题的基础，首先要理解核算机数字的处理方式。核算机的全部信息都是二进制，数字也不例外，一切数字都是一段二进制。

在 JavaScript 中存储数字的二进制有 64 位，即咱们常说的 64 位双精度浮点型数字。每个数字对应的 64 位二进制分为三段：符号位、指数位、尾数位。

其间符号位在六十四位的第一位，0 表明正数，1 表明负数。符号位之后的 11 位是指数位，决定了数字的规模。指数位之后的 52 位是尾数位，决定了数字的精度。

在 JavaScript 中，双精度浮点型的数转化成二进制的数保存，读取时依据指数位和尾数位的值转化成双精度浮点数。

比方说存储 8.8125 这个数，它的整数部分的二进制是 1000，小数部分的二进制是 1101。这两部分连起来是 1000.1101，但是存储到内存中小数点会消失，因为核算机只能存储 0 和 1。

1000.1101 这个二进制数用科学计数法表明是 1.0001101 * 2^3，这里的 3 （二进制是 0011）即为指数。

可运用如下代码查看：

function getBinaryRepresentation(number) {
  const buffer = new ArrayBuffer(8); // 创立一个包含8字节的   ArrayBuffer
  const view = new DataView(buffer); // 创立一个DataView以便访问内存中的数据
  view.setFloat64(0, number); // 将浮点数写入到内存中
  // 读取内存中的字节，并将其转化为二进制字符串
  const binaryString = Array.from(new Uint8Array(buffer))
    .map(byte => byte.toString(2).padStart(8, '0'))
    .join('');
  // 将二进制字符串分割为符号位、指数位和尾数位
  const signBit = binaryString[0];
  const exponentBits = binaryString.substring(1, 12);
  const mantissaBits = binaryString.substring(12，64);
  return { signBit, exponentBits, mantissaBits };
}
const number = 8.8125; // 要展示的数字
const { signBit, exponentBits, mantissaBits } = 	getBinaryRepresentation(number);
console.log(`符号位: ${signBit}`);
console.log(`指数位: ${exponentBits}`);
console.log(`尾数位: ${mantissaBits}`);
符号位: 0
指数位: 10000000010
尾数位: 0001101000000000000000000000000000000000000000000000

现在咱们很简略判别符号位是 0，尾数位就是科学计数法的小数部分 0001101。指数位用来存储科学计数法的指数，此处为 3。指数位有正负，11 位指数位表明的指数规模是 -1023~1024，所以指数 3 的指数位存储为 1026（3 + 1023）。

能够判别 JavaScript 数值的最大值为 53 位二进制的最大值： 2^53 -1。

PS：科学计数法中小数点前的 1 能够省略，因为这一位永远是 1。比方 0.5 二进制科学计数为 1.00 * 2^-1。

2. 为什么会发生小数精度问题

首先弥补一下小数的二进制的核算办法：

十进制小数转为二进制与整数相反，需求每次乘以2
8.8125
o.8125*2=1.625=>1
0.625*2=1.25=>1
0.25*2=0.5=>0
0.5*2=1=>1
小数部分为1101
二进制小数转为十进制
1*2^-1+1*2^-2+0*2^-3+1*2^-4

在了解数字的存储后，很简略理解小数精度问题，因为十进制有 这种无限循环数字，二进制也有循环数字。比方让 0.1 变为二进制，依照二进制转化永远会有余数，所以会是一个无限循环的二进制 0.0001 1001 1001 1001…(1100循环)。0.2 也是同理 0.0011 0011 0011 0011…(0011循环)。

所以当两个浮点数相加时，成果会有一些差错。比方 0.1 + 0.2 ，实际上是 0.0001 1001 1001…(1001循环) + 0.0011 0011 0011…(0011循环)，假如截取于第 52 位，就会得到一个有差错的成果，转为十进制为0.30000000000000004，与 0.3 不相等。

3. 前端怎么确保小数精确

首先出于安全性及精确性考虑，重要的数字核算应该交给服务端负责，相对于前端，服务端有更成熟安稳的数字处理办法，安全性也会更高。

当然前端有时也需求一些精确的数字核算，比方一些动画处理、定时器处理以及一些条件判别等。我简略列举几种办法供大家参阅：

  • toFixed 指定小数位数 这种办法比较简略，不过有个点要注意，这个办法是四舍五入，但有时分看上去并不会，比方 2.55.toFixed(1) 显示的成果是 2.5 而不是 2.6。这是因为 2.55 二进制存储的值并不精确，调用 2.55.toPrecision(100) 能够看到这个数的实际值是 2.5499….. ，所以截取一位四舍五入是 2.5。再举一个例子 (2.449999999999999999).toFixed(1) = 2.5，因为这个数与 2.45 的差值小于 Number.EPSILON。
  • 将小数转为整数核算 这个办法的问题是转化会添加额定的复杂度和核算量，在某些场景下，可能会导致数值溢出问题。
  • 第三方库 精确核算推荐运用成熟的库，像 BigNumber.js、decimal.js ，进行高精度的浮点数核算。原理是把数字核算变为字符串核算。

JavaScript 的核算比较复杂，因为没有细分数字类型，底层核算以二进制进行，存储值、核算值都有可能因为精度丢失而不精确，而显示值可能会因为浏览器等宿主环境不同而有不同，所以一定要注意经常发生精度丢失的当地。