JavaScript的类型转换

引子

平时工作中使用 JavaScript 中,有时候会不自觉的遇到类型转换相关的问题还不自知,下面介绍两种常见的类型转换情况,以及转换结果,注意不要在工作中使用这种写法,这种写法会导致结果的不明确。

if(xx)

有时候,为了简便,我们可能会写出如下代码:

1
2
3
4
5
6
var a;
if (a) {
console.log(a);
} else {
console.log("a 未赋值");
}

但是实际上,即使 a 有值,例如a=" "依旧会打印a 未赋值,这是因为括号里的表达式会强制转化为布尔类型,转化规则如下。

类型 结果
Undefined False
Null False
Boolean 直接判断
Number +0,-0,NaN 为 false,其他为 true
String 空字符串为 false,其他均为 true
Object True

a == b

JavaScript==判断会发生类型转换,转化为Number类型进行比较,得出结果,转换规则如下:

a b 结果
null undefined true
Number String x == toNumber(y)
Boolean (any) toNumber(x) == y
Object String or Number toPrimitive(x) == y
otherwise otherwise false

toNumber

type Result
Undefined NaN
Null 0
Boolean ture -> 1, false -> 0
String “abc” -> NaN, “123” -> 123

toPrimitive

对于 Object 类型,会先尝试调用.valueOf方法获取结果,如果该方法未定义,就会调用toString方法获取结果。

常见题目

if(xxx)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 题目1:如下代码输出什么?
if ("hello") {
console.log("hello");
}
// hello

// 题目2:如下代码输出什么?
if ("") {
console.log("empty");
}
// 无

// 题目3:如下代码输出什么?
if (" ") {
console.log("blank");
}
// blank

// 题目4:如下代码输出什么?
if ([0]) {
console.log("array");
}
// array

if ("0.00") {
console.log("0.00");
}
// 无

a == b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
"" == 0; //题目1 true
" " == 0; //题目2 true
"" == true; //题目3 false
"" == false; //题目4 true
" " == true; //题目5 false
!" " == true; //题目6 false
!" " == false; //题目7 true
"hello" == true; //题目8 false
"hello" == false; //题目9 false
"0" == true; //题目10 false
"0" == false; //题目11 true
"00" == false; //题目12 true
"0.00" == false; //题目13 true
undefined == null; //题目14 true
true == {}; //题目15 false
true == []; //题目16 false
var obj = {
a: 0,
valueOf: function () {
return 1;
},
};
obj == "[object Object]"; //题目17 false
obj == 1; //题目18 true
obj == true; //题目19 true

小结

平时工作中一定不要使用if(xxx)a==b的写法,遇到这种写法时,依据上述方式进行判断,就能很快得到结果。

作者

bert_cai

发布于

2019-05-23

更新于

2020-11-16

许可协议

评论