JavaScript 类型转换

Begindev 编辑部 March 25, 2026

类型转换和强制转换决定了不同数据类型的值如何相互作用和转换。

JavaScript 是一种弱类型 (loosely typed) 语言，它经常自动执行这些转换，这既是一种便利，也可能成为困惑的源头。

本章将深入探讨显式类型转换（也称为类型转换/Type Conversion）和隐式类型转换（也称为强制转换/Coercion）的复杂性，为你提供在 JavaScript 程序中有效管理数据类型的知识和工具。

1. 类型转换 vs. 强制转换

区分这两个概念很重要：

类型转换 (Type Conversion / Explicit): 这涉及使用内置函数或方法手动将值从一种数据类型转换为另一种数据类型。作为程序员，是你显式地告诉 JavaScript 执行转换。
强制转换 (Type Coercion / Implicit): 这在 JavaScript 尝试对不同数据类型的值执行操作时自动发生。JavaScript 引擎决定如何转换值以使操作成为可能。

理解这种区别是预测代码行为的关键。

2. 显式类型转换 (Explicit Type Conversion)

显式类型转换允许你控制值的转换方式。JavaScript 为此提供了几个内置函数。

2.1 转换为数字 (Number)

有几种方法可以将值转换为数字：

2.1.1 `Number()` 函数

这是将值转换为数字的主要函数。它尝试将任何数据类型转换为其数值表示。

// 将字符串转换为数字
let str1 = "123";
let num1 = Number(str1);
console.log(num1); // 输出: 123 (数字)

let str2 = "3.14";
let num2 = Number(str2);
console.log(num2); // 输出: 3.14 (数字)

let str3 = "hello";
let num3 = Number(str3);
console.log(num3); // 输出: NaN (非数值)

let str4 = "";
let num4 = Number(str4);
console.log(num4); // 输出: 0 (空字符串转为 0)

// 将布尔值转换为数字
console.log(Number(true));  // 输出: 1
console.log(Number(false)); // 输出: 0

// 将 null 和 undefined 转换为数字
console.log(Number(null));      // 输出: 0
console.log(Number(undefined)); // 输出: NaN

2.1.2 `parseInt()` 函数

此函数解析字符串并返回一个整数。

它从左到右解析，直到遇到无效数字字符为止。
它接受第二个参数 radix（基数），用于指定进制（强烈建议始终提供此参数）。

console.log(parseInt("10"));      // 输出: 10
console.log(parseInt("10.5"));    // 输出: 10 (小数部分被截断)
console.log(parseInt("10px"));    // 输出: 10 (解析直到遇到 'p')
console.log(parseInt("px10"));    // 输出: NaN (以非数字开头)
console.log(parseInt("1010", 2)); // 输出: 10 (二进制转十进制)

2.1.3 `parseFloat()` 函数

此函数解析字符串并返回一个浮点数。与 parseInt() 类似，它在遇到无效字符时停止解析。

console.log(parseFloat("3.14"));    // 输出: 3.14
console.log(parseFloat("3.14px"));  // 输出: 3.14
console.log(parseFloat("  3.14  ")); // 输出: 3.14 (自动去除首尾空格)

2.2 转换为字符串 (String)

2.2.1 `String()` 函数

可以将任何值转换为字符串。

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

2.2.2 `.toString()` 方法

大多数 JavaScript 对象都有这个方法。
注意： 不能在 null 或 undefined 上调用此方法，否则会报错。

let num = 123;
console.log(num.toString()); // 输出: "123"

let bool = true;
console.log(bool.toString()); // 输出: "true"

// null.toString(); // 抛出错误 (TypeError)

2.3 转换为布尔值 (Boolean)

使用 Boolean() 函数可以将值转换为布尔值。这是理解 JavaScript 逻辑判断的核心。

2.3.1 真值 (Truthy) 与假值 (Falsy)

在 JavaScript 中，只有少数几个值被认为是“假值 (Falsy)”，转换为布尔值时为 false。所有其他值都是“真值 (Truthy)”。

假值 (Falsy) 列表：

false
0 (零)
-0 (负零)
0n (BigInt 零)
"" (空字符串)
null
undefined
NaN

console.log(Boolean(0));        // 输出: false
console.log(Boolean(""));       // 输出: false
console.log(Boolean(null));     // 输出: false

console.log(Boolean("hello"));  // 输出: true (非空字符串)
console.log(Boolean(123));      // 输出: true (非零数字)
console.log(Boolean([]));       // 输出: true (空数组也是真值)
console.log(Boolean({}));       // 输出: true (空对象也是真值)
console.log(Boolean("false"));  // 输出: true (字符串 "false" 是非空的，所以是真值)

3. 隐式强制转换 (Implicit Type Coercion)

隐式强制转换发生在 JavaScript 自动转换数据类型时。如果不了解规则，这可能会导致意外结果。

3.1 字符串拼接 (`+` 运算符)

+ 运算符比较特殊。如果操作数中有一个是字符串，JavaScript 会将另一个操作数也转换为字符串，并进行拼接。

let result1 = "5" + 2;
console.log(result1); // 输出: "52" (数字 2 被转换为字符串 "2")

let result2 = "5" + true;
console.log(result2); // 输出: "5true"

let result3 = "5" + null;
console.log(result3); // 输出: "5null"

3.2 算术运算符 (`-`, `*`, `/`, `%`)

除了 + 以外的算术运算符，总是试图将操作数转换为数字。

let result4 = "5" - 2;
console.log(result4); // 输出: 3 (字符串 "5" 被转换为数字 5)

let result5 = "10" * "2";
console.log(result5); // 输出: 20

let result6 = "hello" - 2;
console.log(result6); // 输出: NaN ("hello" 无法转为数字)

let result7 = true + 1; 
console.log(result7); // 输出: 2 (true 被转换为 1)

3.3 比较运算符 (`==` vs `===`)

== (宽松相等): 在比较前执行强制类型转换。
=== (严格相等): 不执行强制类型转换。类型不同直接返回 false。

// 宽松相等 (==) - 发生强制转换
console.log(5 == "5");   // 输出: true
console.log(true == 1);  // 输出: true
console.log(null == undefined); // 输出: true (特例)
console.log(0 == false); // 输出: true

// 严格相等 (===) - 推荐使用
console.log(5 === "5");   // 输出: false
console.log(true === 1);  // 输出: false
console.log(null === undefined); // 输出: false

3.4 逻辑运算符 (`&&`, `||`, `!`)

逻辑运算符在评估时会将值强制转换为布尔值，但返回值保留原始值（! 除外）。

// || (OR): 返回第一个真值，或者最后一个值
console.log("hello" || 0); // 输出: "hello"
console.log(0 || "world"); // 输出: "world"

// && (AND): 返回第一个假值，或者最后一个值
console.log("hello" && 0); // 输出: 0
console.log("hello" && "world"); // 输出: "world"

// ! (NOT): 返回布尔值
console.log(!0); // 输出: true
console.log(!"hello"); // 输出: false

4. 最佳实践

使用严格相等 (=== 和 !==): 避免使用 ==，以防止意外的强制转换带来的 Bug。
显式优于隐式: 当你想转换类型时，显式地写出来（如 Number(value)），这样代码意图更清晰。
了解 Falsy 值: 熟记 false, 0, "", null, undefined, NaN，这在写条件判断（如 if (value)）时非常有用。
利用工具: 使用 ESLint 等代码检查工具来捕获潜在的类型强制转换问题。

1. 类型转换 vs. 强制转换

2. 显式类型转换 (Explicit Type Conversion)

2.1 转换为数字 (Number)

2.1.1 Number() 函数

2.1.2 parseInt() 函数

2.1.3 parseFloat() 函数

2.2 转换为字符串 (String)

2.2.1 String() 函数

2.2.2 .toString() 方法