ECMAScript教程

4.1 类型转换概述

类型转换是将一种数据类型转换为另一种数据类型的过程。在ECMAScript中，类型转换分为两种类型：

• 显式转换：通过代码明确指定的类型转换
• 隐式转换：在运算或比较过程中自动发生的类型转换

4.2 显式类型转换

显式类型转换是通过调用内置函数或使用特定语法来明确指定的转换。

转换为字符串

// 使用String()函数
let num = 42;
let str1 = String(num); // "42"

// 使用toString()方法
let str2 = num.toString(); // "42"

// 使用模板字符串
let str3 = `${num}`; // "42"

// 特殊值的转换
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
console.log(String(true)); // "true"
console.log(String(false)); // "false"

转换为数字

// 使用Number()函数
let str = "123";
let num1 = Number(str); // 123

// 使用parseInt()和parseFloat()
let intNum = parseInt("42.5"); // 42
let floatNum = parseFloat("42.5"); // 42.5

// 使用一元加号操作符
let num2 = +"123"; // 123

// 特殊值的转换
console.log(Number("")); // 0
console.log(Number("123abc")); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

转换为布尔值

// 使用Boolean()函数
let value = "Hello";
let bool1 = Boolean(value); // true

// 使用双重否定操作符
let bool2 = !!value; // true

// 转换为false的值（falsy值）
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

// 所有其他值都转换为true
console.log(Boolean("0")); // true
console.log(Boolean([])); // true
console.log(Boolean({})); // true

4.3 隐式类型转换

隐式类型转换是在运算或比较过程中自动发生的转换，理解这些规则对于编写可靠的代码至关重要。

数值运算中的转换

// 加法运算符
console.log("5" + 3); // "53" (字符串拼接)
console.log(5 + "3"); // "53" (字符串拼接)
console.log("5" + true); // "5true"
console.log("5" + {}); // "5[object Object]"

// 其他运算符
console.log("5" - 3); // 2 (字符串转换为数字)
console.log("5" * 3); // 15 (字符串转换为数字)
console.log("5" / 3); // 1.666... (字符串转换为数字)

比较运算中的转换

// 相等比较 (==)
console.log(5 == "5"); // true (字符串转换为数字)
console.log(true == 1); // true (布尔值转换为数字)
console.log(false == 0); // true (布尔值转换为数字)
console.log(null == undefined); // true (特殊规则)

// 严格相等比较 (===)
console.log(5 === "5"); // false (不进行类型转换)
console.log(true === 1); // false (不进行类型转换)

逻辑运算中的转换

// 逻辑与(&&)和逻辑或(||)
console.log("Hello" && 42); // 42 (第一个操作数转换为true，返回第二个操作数)
console.log("" && 42); // "" (第一个操作数转换为false，返回第一个操作数)
console.log("Hello" || 42); // "Hello" (第一个操作数转换为true，返回第一个操作数)
console.log("" || 42); // 42 (第一个操作数转换为false，返回第二个操作数)

4.4 转换规则详解

ToString规则

ToString规则用于将值转换为字符串：

• null → "null"
• undefined → "undefined"
• true → "true"
• false → "false"
• 数字 → 数字的字符串表示
• 对象 → 调用toString()方法

ToNumber规则

ToNumber规则用于将值转换为数字：

• true → 1
• false → 0
• null → 0
• undefined → NaN
• 字符串 → 解析为数字，失败则为NaN
• 对象 → 先转换为原始值，再转换为数字

ToBoolean规则

ToBoolean规则用于将值转换为布尔值：

• falsy值：false, 0, -0, "", null, undefined, NaN
• truthy值：除falsy值以外的所有值

4.5 对象到原始值的转换

对象到原始值的转换遵循特定的规则：

转换优先级

let obj = {
    toString() {
        return "custom toString";
    },
    valueOf() {
        return "custom valueOf";
    }
};

// 在需要原始值的上下文中
console.log(String(obj)); // "custom toString"
console.log(Number(obj)); // NaN (valueOf返回字符串，无法转换为数字)

// 明确指定转换hint
let obj2 = {
    [Symbol.toPrimitive](hint) {
        if (hint === "number") {
            return 42;
        }
        if (hint === "string") {
            return "hello";
        }
        return "default";
    }
};

console.log(String(obj2)); // "hello"
console.log(Number(obj2)); // 42
console.log(obj2 + ""); // "default"

4.6 避免类型转换问题的最佳实践

使用严格相等

// 推荐：使用严格相等
if (value === 5) {
    // 只有当value确实是数字5时才执行
}

// 不推荐：使用宽松相等
if (value == 5) {
    // value可能是"5"、true+4等
}

明确类型转换

// 推荐：明确转换类型
let num = Number(inputValue);
let str = String(numberValue);

// 不推荐：依赖隐式转换
let result = inputValue + ""; // 不清晰的意图