JavaScript 中字符串与数字的运算规则详解

前言

在 JavaScript 中，字符串和数字的混合运算是日常开发中常见的操作，但其结果可能因运算符类型、操作数顺序等因素产生意外行为。类型强制转换（Type Coercion） 是这一现象的核心机制。

---

一、核心知识点总览

运算符	规则	示例	结果
+	若存在字符串，触发拼接（隐式转字符串）	"5" + 3	"53"
- * / %	强制转数字后运算（若无法转数字，结果为 NaN）	"10" - 2	8
一元 +	强制转数字（等同于 Number()）	+"5"	5
==	宽松比较时触发隐式转换（字符串优先转数字）	"5" == 5	true
===	严格比较，不触发转换	"5" === 5	false

---

二、加法运算（+）：字符串拼接优先

规则详解

1. 只要有一个操作数是字符串，所有非字符串操作数会被隐式转换为字符串，然后进行拼接。

2. 操作顺序影响结果：运算从左到右执行，每一步的类型转换会影响后续结果。

代码示例

console.log("5" + 3);       // "53"（字符串拼接）
console.log(5 + "3");       // "53"
console.log(5 + 3 + "2");   // "82"（先计算5+3=8，再拼接"2"）
console.log("5" + 3 + 2);   // "532"（从左到右拼接）
console.log("" + 5);        // "5"（空字符串拼接）

避坑指南

• 避免意外拼接：若需要数字相加，确保所有操作数为数字类型。

• 显式转换：使用 Number() 或一元 + 强制转数字：

  console.log(Number("5") + 3);  // 8
  console.log(+"5" + 3);         // 8

---

三、其他算术运算（-、*、/、%）：强制转数字

规则详解

• 所有操作数会被隐式转换为数字（若无法转换，结果为 NaN）。

• 空字符串 "" 和 null 会转为 0，undefined 转为 NaN。

代码示例

console.log("10" - 2);      // 8
console.log("5" * "2");     // 10
console.log("20" / "4");    // 5
console.log("abc" - 3);     // NaN（无法转数字）
console.log("" - 5);        // -5（空字符串转0）
console.log(null * 2);      // 0（null转0）
console.log(undefined / 2); // NaN

避坑指南

• 检查字符串内容：确保字符串是有效的数字格式，避免 NaN。

• 显式转换：使用 parseInt 或 parseFloat 处理复杂字符串：

  console.log(parseInt("10px", 10) - 5);  // 5（提取数字部分）

---

四、布尔值参与运算时的转换

规则详解

• 布尔值 true 转 1，false 转 0。

• 混合运算时，布尔值会先转为数字，再根据运算符类型决定是否进一步转换。

代码示例

console.log("5" + true);    // "5true"（拼接）
console.log("5" - true);    // 4（true转1）
console.log(true + 1);      // 2（布尔值转数字）
console.log(false + "2");   // "false2"（拼接）

---

五、特殊场景与边界值

1. 空字符串 "" 的转换

• 加法：空字符串拼接非字符串时，将非字符串转为字符串。

• 其他运算：空字符串转为 0。

  console.log("" + 5);      // "5"
  console.log("" - 5);      // -5

2. null 和 undefined 的转换

• null 转数字为 0，undefined 转数字为 NaN。

  console.log(null + 5);      // 5（null转0）
  console.log(undefined + 5); // NaN