← 返回目录

6. 隐式转换与精度坑

浏览器偷偷帮你变类型很方便,但到处是坑:为什么 5-2=3 而 5+2=52?为什么 0.1+0.2 不等于 0.3?先猜再点按钮验证。

6.1 互动演示

先在心里预测结果,再点按钮验证,落差越大记得越牢。

6.2 知识点逐条讲解(配合代码)

① 哪些东西"算假"?六个假值

把一个东西扔进 Boolean() 里,它会告诉你这个东西"真还是假"。整个 JS 里只有 6 个东西会被判成"假",其他全是"真"。连字符串 "false" 都是真的(因为里面有字)!

被判成 false 的值人话
''(空字符串)一张白纸,没写字
0数字 0
NaN算不出来
null主动放空
undefined忘了放东西
false它自己
Boolean('');       // false(空串)
Boolean(0);        // false
Boolean(NaN);      // false
Boolean(null);     // false
Boolean(undefined);// false
Boolean('false'); // true  ← 字符串里有字,是真!
Boolean('hello');  // true
		

② 浏览器偷偷帮你转类型:'5'-2 和 '5'+2

JS 是弱类型,你算的时候它会偷偷把类型变一变。关键看加号 + 两边有没有文字

'5' - 2;   // 3    减号没文字,浏览器把 '5' 偷偷变成数字 5 再减
'5' + 2;   // "52" 加号一边是文字,就变成"把两段拼起来",2 也变文字
'10' / 2;  // 5    除法同理,'10' 变 10
'10' * 2;  // 20   乘法同理
		

如果你以为 '5' + 2 会等于 7,那就上当了——加号只要碰着文字,就不干加法、改干"拼接",所以出来的是 "52"。记住:'5'-2=3,但 '5'+2="52"

③ 精度坑:0.1 + 0.2 为什么不等于 0.3

console.log(0.1 + 0.2);          // 0.30000000000000004(一长串尾巴)
console.log(0.1 + 0.2 === 0.3); // false
		

如果你拿 JS 小数直接算钱,就会出现 0.1+0.2 多出一截尾巴,因为电脑用二进制存小数,有些十进制小数存不精确。这不是代码错,是浮点天生的。所以算钱要么乘 100 变整数(用分算),要么用专门的库,别硬算。

isNaN:问一句"它是不是数字"

NaN = "算不出来"。isNaN() 就是替你问一句"这玩意儿是不是数字?",返回 true 代表"它不是数字"。

isNaN(123);    // false:123 是数字,所以"不是非数字"
isNaN('123');  // false:'123' 能变数字
isNaN('abc');  // true:'abc' 变数字是 NaN,所以"它不是数字"
		

如果你看到 isNaN(123) 返回 false 觉得它在骗人,别晕:它的名字是"is Not a Number",true = "真的不是数字"。123 是数字,所以它说 false(不是非数字)。名字绕,结果反着记。

实战:用在哪 / 常见坑 / 怎么解决

① 可能在什么地方用:拼提示语展示;简单的加减计算。

② 常见的问题:算钱算出 0.30000004;以为 '5'+2 等于 7,结果得到 '52'。

③ 解决思路:涉及钱就乘 100 用分算;分不清拼接和加法时,先把输入用 Number() 转干净再算。

一句话记住:六个假值 '' 0 NaN null undefined false;'5'-2=3 但 '5'+2="52";0.1+0.2≠0.3;isNaN 返回 true 就表示"这玩意儿不是数字"