JavaScript数据类型转换的注意事项

2023年5月18日上午9:08 • JavaScript

JavaScript中的数据类型转换是非常常见的操作，但是在进行类型转换时需要注意一些细节，否则就会出现一些不期望的结果。本攻略将详细讲解JavaScript中数据类型转换的注意事项。

1. 显式类型转换

在JavaScript中，显式类型转换又称为强制类型转换，是指通过一些内置函数将某一数据类型强制转换为其他数据类型。

1.1 Number()

Number()函数可以将其他数据类型转换成数字类型，其转换规则如下：

如果转换的值本身就是一个数字，那么返回它本身。
如果转换的值是一个字符串，且其表示一个数字，那么返回它所表示的数字值。
如果转换的值是一个字符串，但其表示的并不是一个数字，那么返回NaN。
如果转换的值是布尔值，那么true返回1，false返回0。
如果转换的值是null，那么返回0。
如果转换的值是undefined，那么返回NaN。

示例：

console.log(Number("123")); // 123
console.log(Number("1a2b")); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

1.2 String()

String()函数可以将其他数据类型转换成字符串类型，其转换规则如下：

如果转换的值已经是一个字符串，则返回它本身。
如果转换的值是null或undefined，那么返回"null"或"undefined"。
如果转换的值是一个数字，那么返回该数字的字符串表示。
如果转换的值是一个布尔值，那么true返回"true"，false返回"false"。

示例：

console.log(String(123)); // "123"
console.log(String(true)); // "true"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"

1.3 Boolean()

Boolean()函数可以将其他数据类型转换成布尔类型，其转换规则如下：

如果转换的值是0、-0、null、false、NaN、undefined或空字符串（""），那么返回false。
其他情况都返回true。

示例：

console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(1)); // true
console.log(Boolean(true)); // true

2. 隐式类型转换

在JavaScript中，隐式类型转换指在某些情况下，JavaScript会自动将数据类型转换成另一种类型。隐式类型转换常见的情况包括加法运算符、关系运算符、相等运算符等。

2.1 加法运算符

当加法运算符（+）作用于两个操作数时，如果操作数中出现了字符串，那么JavaScript会将另外一个操作数也当做字符串来处理并完成字符串拼接操作。如果操作数中没有字符串，那么JavaScript会将它们转换成数字相加。

示例：

console.log(1 + 2); // 3
console.log("1" + "2"); // "12"
console.log("1" + 2); // "12"
console.log(1 + true); // 2

2.2 关系运算符

关系运算符大于（>）、小于（<）、大于等于（>=）和小于等于（<=）的比较都会进行隐式类型转换。当比较的操作数中有一个是字符串类型时，JavaScript会将另外一个操作数也转换为字符串后再比较；当比较的操作数中不包含字符串时，JavaScript会将它们转换成数字后再比较。

示例：

console.log(1 < 2); // true
console.log("1" < "2"); // true
console.log("2" < "11"); // true
console.log("2" < 11); // false
console.log("2" >= 11); // false

2.3 相等运算符

相等运算符包括相等（==）和不相等（!=）运算符。在进行相等运算时，如果两个操作数的类型不同，JavaScript会尝试将它们转换成相同的类型再进行比较。

转换规则如下：

如果一个操作数是null，另一个操作数是undefined，那么它们相等。
如果一个操作数是数字，另一个操作数是字符串，JavaScript会将字符串转换成数字后进行比较。
如果一个操作数是布尔值，另一个操作数是非布尔值，那么先将布尔值转换成数字再进行比较。
如果一个操作数是对象，另一个操作数是数字或字符串，JavaScript会查看对象是否有valueOf()方法，如果有，那么调用该方法得到一个原始值（一般是数字或字符串），得到的值再进行比较。

示例：

console.log(1 == "1"); // true
console.log(1 == true); // true
console.log("2" != 2); // false
var obj = {
  valueOf: function() {
    return 1;
  }
};
console.log(1 == obj); // true