Z
ZHANK
基础入门

类型转换

理解隐式与显式类型转换,避免常见陷阱

类型转换

JavaScript 的类型转换机制常常让初学者困惑,理解它是写出健壮代码的关键。

学完本章你将: 掌握显式与隐式类型转换规则。


显式类型转换

javascript
// 转为字符串
console.log(String(123));      // "123"
console.log(String(true));     // "true"
console.log(String(null));     // "null"
console.log((123).toString()); // "123"

// 转为数字
console.log(Number("123"));    // 123
console.log(Number("12.34"));  // 12.34
console.log(Number("123abc")); // NaN
console.log(Number(""));       // 0
console.log(Number(true));     // 1
console.log(Number(false));    // 0
console.log(Number(null));     // 0
console.log(Number(undefined));// NaN

console.log(parseInt("42px"));   // 42
console.log(parseFloat("3.14m"));// 3.14

// 转为布尔
console.log(Boolean(1));       // true
console.log(Boolean(0));       // false
console.log(Boolean("hello")); // true
console.log(Boolean(""));      // false

隐式类型转换(类型强制)

javascript
// 字符串拼接触发转字符串
console.log("5" + 3);    // "53"(数字转字符串)
console.log("5" + true); // "5true"

// 算术运算触发转数字
console.log("5" - 3);    // 2(字符串转数字)
console.log("10" * 2);   // 20
console.log("6" / "3");  // 2
console.log("hello" - 1);// NaN

// 逻辑运算触发转布尔
console.log(!"");        // true
console.log(!!"hello");  // true

== 和 === 的区别

javascript
// == 会做类型转换
console.log(5 == "5");       // true
console.log(0 == false);     // true
console.log(null == undefined); // true
console.log("" == false);    // true

// === 不做类型转换(推荐使用)
console.log(5 === "5");      // false
console.log(0 === false);    // false

Falsy 值(9 个假值)

以下值在布尔上下文中被视为 false

javascript
const falsyValues = [
    false,
    0,
    -0,
    0n,        // BigInt zero
    "",
    null,
    undefined,
    NaN,
];

// 验证
falsyValues.forEach(v => {
    console.log(Boolean(v)); // 全部 false
});

实用技巧

javascript
// 快速转数字
console.log(+"42");      // 42
console.log(+"3.14");    // 3.14

// 快速转布尔
console.log(!!"hello");  // true
console.log(!!0);        // false

// 默认值模式
function greet(name) {
    name = name || "Anonymous"; // 利用短路运算
    return `Hello, ${name}!`;
}
console.log(greet());         // "Hello, Anonymous!"
console.log(greet("Alice"));  // "Hello, Alice!"

// 现代写法(更安全)
function greetModern(name = "Anonymous") {
    return `Hello, ${name}!`;
}