JavaScript 是一门动态类型的语言，在进行数值运算时，往往需要将其他类型的值转换为数字值（Number）。这些转换涉及隐式转换和显式转换的规则，理解这些规则对于编写稳定且可预测的代码至关重要。本文将详细介绍 JavaScript 中其他值到数字值的转换规则。

一、显式转换：使用 Number() 函数

在 JavaScript 中，可以使用 Number() 函数将其他类型的值转换为数值。不同类型的输入会遵循特定的转换规则。

1. 字符串转换为数字

如果字符串是有效的数值表示，则 Number() 直接转换为对应的数值。

console.log(Number("123"));  // 123
console.log(Number("123.45")); // 123.45
console.log(Number("00123")); // 123

但如果字符串包含非数值字符，则转换结果为 NaN（Not-a-Number）。

console.log(Number("123abc")); // NaN
console.log(Number("hello"));  // NaN
console.log(Number(""));       // 0（空字符串被转换为 0）

2. 布尔值转换为数字

true 转换为 1，false 转换为 0。

console.log(Number(true));  // 1
console.log(Number(false)); // 0

3. null 和 undefined

• null 转换为 0
• undefined 转换为 NaN

console.log(Number(null));      // 0
console.log(Number(undefined)); // NaN

4. Symbol 转换

Symbol 不能转换为数字，否则会抛出 TypeError。

let sym = Symbol("test");
console.log(Number(sym)); // TypeError: Cannot convert a Symbol value to a number

5. 对象转换为数字

对象（包括数组）在转换为数字时，会先调用 valueOf() 方法，如果返回的不是基本类型值，则调用 toString() 方法并进行字符串转换。

console.log(Number({
    
    }));          // NaN（对象转换为字符串为 "[object Object]"，转换为数字后为 NaN）
console.log(Number({
    
     valueOf: () => 10 })); // 10
console.log(Number([]));         // 0（空数组转换为空字符串，再转换为 0）
console.log(Number([99]));       // 99（单个数值元素的数组直接转换为该数值）
console.log(Number([1,2,3]));    // NaN（多个元素的数组转换为字符串 "1,2,3"，再转换为 NaN）

二、隐式转换：涉及算术运算符和比较运算符

除了 Number() 之外，JavaScript 在某些操作中会自动将值转换为数字。

1. 算术运算符

加法 +

加法运算符在操作数中有字符串时，会触发字符串拼接，而不是数值相加。

扫描二维码关注公众号，回复： 17556180 查看本文章

console.log("10" + 2);   // "102"（字符串拼接）
console.log("10" + true); // "10true"（字符串拼接）

但如果两个操作数都可以转换为数字，则执行数值加法。

console.log(10 + true);   // 11（true 转换为 1）
console.log(10 + null);   // 10（null 转换为 0）
console.log(10 + undefined); // NaN（undefined 转换为 NaN）

其他算术运算符（-、*、/、%）

其他算术运算符会将操作数转换为数字后再计算。

console.log("10" - 2);   // 8（字符串 "10" 转换为数值 10）
console.log("10" * 2);   // 20
console.log("10" / 2);   // 5
console.log("10" % 3);   // 1
console.log("abc" - 2);  // NaN（无法转换为数值）

2. 比较运算符

比较运算符（>、<、>=、<=）在比较不同类型的值时，会尝试将其转换为数字。

console.log("5" > 3);   // true（"5" 转换为 5）
console.log("5" < 3);   // false
console.log(true > false); // true（1 > 0）
console.log("abc" > 2); // false（"abc" 转换为 NaN，与任何数值比较都为 false）

3. 相等运算符 ==

== 会进行类型转换，而 === 不会。

console.log("5" == 5);   // true（字符串 "5" 转换为数值 5）
console.log(true == 1);  // true（true 转换为 1）
console.log(false == 0); // true（false 转换为 0）
console.log(null == 0);  // false（null 只与 undefined 视为相等）
console.log(null == undefined); // true

但 === 不进行类型转换，只有类型和值都相等时才返回 true。

console.log("5" === 5);   // false（不同类型）
console.log(true === 1);  // false（不同类型）
console.log(false === 0); // false（不同类型）

三、避免类型转换陷阱

在 JavaScript 中，隐式类型转换可能会导致意想不到的行为，因此建议：

1. 尽量使用 === 进行比较，避免 == 带来的类型转换问题。
2. 在数值运算前显式转换，使用 Number() 或 parseFloat() 以确保输入类型。
3. 警惕字符串拼接，使用 Number() 确保算术运算中不会意外进行字符串拼接。

const a = "10";
const b = 2;
console.log(Number(a) + b); // 12（避免字符串拼接）

四、总结

JavaScript 在不同场景下会对非数值类型进行隐式或显式转换，了解这些转换规则有助于避免错误，提高代码的可预测性。最重要的原则是：尽量避免依赖隐式转换，使用显式转换确保代码行为符合预期。

推荐：

• JavaScript
• react
• vue

---