[JavaScript知识库]JavaScript之解决数值精度丢失、indexOf、split、toString、replace、npm install mj-calculation --save

1、案例

console.log(0.1 + 0.1);
// 0.2
console.log(0.1 + 0.2);
// 0.30000000000000004
console.log(1.2 - 1);
// 0.19999999999999996

在JavaScript中加减法都会导致精度丢失。这不是JavaScript独特的现象，在其他语言中也存在类似现象，比如在Python中执行print(0.1 + 0.2) 的结果也是0.30000000000000004。

2、原因

JavaScript内部只有一种数字类型Number，也就是说JavaScript语言的底层根本没有整数，所有数字都是以IEEE-754标准格式64位浮点数形式储存，1与1.0是相同的。因为有些小数以二进制表示位数是无穷的。JavaScript会把超出53位之后的二进制舍弃，所以涉及小数的比较或运算时容易精度丢失。

浮点数的运算过程

首先，十进制的0.1和0.2会转换成二进制，但是由于浮点数用二进制表示是无穷的。

0.1 ——> 0.0001 1001 1001 1001 ...(1001循环)
0.2 ——> 0.0011 0011 0011 0011 ...(0011循环)

IEEE754标准的64位双精度浮点数的小数部分最多支持53位二进制，多余的二进制数字被截断，所以两者相加之后的二进制之和如下。

0.0100110011001100110011001100110011001100110011001101

将截断之后的二进制数字再转换为十进制，就成了0.30000000000000004，所以在计算时产生了误差。

3、解决方案

3.1、推荐使用第三方库

1、mathjs
2、decimal
3、big
4、bignumber

3.2、个人封装的库，可供学习与使用

下载/安装命令

npm install mj-calculation --save

使用说明会在安装包的.md文件中标注。

关键代码

function handleValue(numb1 = 0, numb2 = 0, type) {
	if (type === 'addition' || type === 'subtraction') {
		let numLen1 = 0,
			numLen2 = 0,
			maxLen;
		
		if (numb1.indexOf('.') !== -1) numLen1 = (numb1.split('.')[1]).length;
		if (numb2.indexOf('.') !== -1) numLen2 = (numb2.split('.')[1]).length;
		maxLen = Math.pow(10, Math.max(numLen1, numLen2));
		
		return maxLen;
	} else if (type === 'multiplication') {
		let maxLen = 0;
		if (numb1.indexOf('.') !== -1) maxLen += (numb1.split('.')[1]).length;
		if (numb2.indexOf('.') !== -1) maxLen += (numb2.split('.')[1]).length;
		
		return maxLen;
	} else if (type === 'division') {
		let numLen1 = 0,
			numLen2 = 0,
			number1,
			number2;
		
		if (numb1.indexOf('.') !== -1) (numLen1 = (numb1.split('.')[1]).length, number1 = numb1.toString().replace(".", ""));
		if (numb2.indexOf('.') !== -1) (numLen2 = (numb2.split('.')[1]).length, number2 = numb2.toString().replace(".", ""));
		
		return { numLen1, numLen2, number1, number2 };
	}
}