详解JavaScript类型转换及规则

在许多情况下，JavaScript中使用的各种值的数据类型都是通过运算符和函数进行转换的。

可以隐式转换数据类型，也可以显式转换数据类型。

今天我们就来了解一下类型转换及其规则。

字符串转换

当需要字符串形式的值时，字符串转换会自动完成。

例如，如果使用+运算符连接字符串和数字，则数字部分将自动转换为字符串。

console.log('字符串' + 1); // "字符串1"

另外，使用String构造函数，可以显式地转换成字符串。

String(值);
值.toString();

除了数值之外，还可以转换各种值。

// 原始类型
console.log(String(1)); // "1"
console.log(String(true)); // "true"
console.log(String(undefined)); // "undefined"

// 对象类型
console.log(String([1, 2, 3])); // "1,2,3"
console.log(String({ key: 'value'})); // "[object Object]"
console.log(String(function() {})); // "function() {}"

使用String构造函数的显式类型转换不会为对象类型值返回有意义的字符串。

因此，它常用于数值等原始型值。

数字转换

进行数学表达式时会自动进行数字转换。

例如，在/和*等进行数值和运算的情况下，非数值的值被转换为数值。

console.log(10 / "2"); // 5
console.log(2 * true); // 2

另外，使用Number构造函数，可以显式转换为数字。

// 可转换为数字的
console.log(Number("123")); // 123
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0

// 无法转换为数字的
console.log(Number("String")); // NaN
console.log(Number(undefined)); // NaN

将字符串转换为数字时，会转换为字符串表示的数字，但如果字符串包含非数字字符，则返回 NaN。

此外，null为0，而undefined为NaN。

布尔转换

布尔转换会在使用条件表达式时自动发生。

例如，在if语句的条件表达式中写入值时。

if (1 < 2) { // 评估为true
  console.log("没错");
}
// "没错"

以下数值为假(false)。

• false

• null

• undefined

• 0

• 0n

• NaN

• ""

相反，任何其他值都为真(true)。

还可以使用Boolean构造函数将任何值转换为真(true)、假(false)值。

Boolean(值);

// 值为真(true)
console.log(Boolean("字符串")); // true
console.log(Boolean(1)); // true
console.log(Boolean([])); // true
console.log(Boolean({})); // true

// 值为假(false)
console.log(Boolean("")); // false
console.log(Boolean(0)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

结语

这一次，我们了解了类型转换及其规则。

• 字符串转换可以使用String构造函数

• 数字转换可以使用Number构造函数

• 真假值转换可以使用Boolean构造函数

由于隐式类型转换可能会产生意外的结果，因此请避免使用这些类型转换，而使用显式转换函数。