基础入门
类型转换
理解隐式与显式类型转换,避免常见陷阱
类型转换
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}!`;
}