面试题：JavaScript 中 + 操作符什么时候用于字符串的拼接？

在 JavaScript 中，+ 操作符的行为是动态的，它既可以用于数值相加，也可以用于字符串拼接。其具体行为取决于操作数的数据类型。

核心规则

当 + 操作符的任意一个操作数是字符串（或可以被转换为字符串）时，JavaScript 会执行字符串拼接；否则，执行数值相加。

这个规则源于 JavaScript 的类型强制转换（Type Coercion）机制。

---

详细规则与示例

1. 至少有一个操作数是字符串 → 字符串拼接

"Hello" + "World"     // "HelloWorld"（字符串 + 字符串）
"Age: " + 25          // "Age: 25"（字符串 + 数字 → 数字转字符串）
"Score: " + true      // "Score: true"（字符串 + 布尔 → 布尔转字符串）
"Value: " + null      // "Value: null"
"Value: " + undefined // "Value: undefined"

2. 两个操作数都是数字 → 数值相加

1 + 2                 // 3
3.5 + 2.1             // 5.6
-1 + 5                // 4

3. 操作数包含对象 → 先转换为原始值，再判断

JavaScript 会先调用对象的 toString() 或 valueOf() 方法将其转换为原始值，然后再应用上述规则。

"Result: " + [1, 2, 3]    // "Result: 1,2,3" → [1,2,3].toString() === "1,2,3"
"Date: " + new Date()     // "Date: Thu Sep 25 2025 ..." → 调用 toString()
"Obj: " + {}              // "Obj: [object Object]"
"Array: " + []            // "Array: "（空字符串）

4. 多个 + 连用：从左到右计算

1 + 2 + "3"   // 先算 1+2=3，再 3+"3" → "33"
"1" + 2 + 3   // 先算 "1"+2="12"，再 "12"+3 → "123"
1 + "2" + 3   // "123"

5. + 作为一元操作符 → 强制转换为数字

+"42"         // 42（字符串转数字）
+true         // 1
+false        // 0
+null         // 0
+undefined    // NaN
+[]           // 0
+{}           // NaN（在非对象字面量上下文中）

这个特性常用于快速类型转换：

const str = "123";
const num = +str; // 快速转数字

---

如何避免意外的字符串拼接？

在进行数学运算时，确保操作数是数字类型：

// 错误：字符串拼接
"10" + "20" = "1020"

// 正确：先转换为数字
parseInt("10") + parseInt("20") // 30
Number("10") + Number("20")     // 30
+"10" + +"20"                   // 30

---

总结

条件	+ 操作符的行为
至少一个操作数是字符串	执行字符串拼接（其他操作数被转换为字符串）
两个操作数都是数字	执行数值相加
操作数包含对象	先调用 toString() 或 valueOf() 转为原始值，再判断
一元 +	强制将操作数转换为数字

关键点：+ 操作符是 JavaScript 中唯一一个会因操作数类型不同而改变行为（加法 vs 拼接）的运算符。理解其背后的类型转换机制，是避免 bug 的关键。