JavaScript中的parseInt(), Number()，+有啥区别？

在JavaScript中，parseInt(), Number(), 和一元加号 + 都可以用来转换值到数字类型，但它们的工作方式和用途有所不同。使用起来就会有一些区别：

parseInt()

• 解析整数：parseInt() 专门用于解析字符串并返回一个整数。如果字符串以数字开头，它会解析直到遇到非数字字符。
• 基数（进制）：parseInt() 可以接受第二个参数，表示要解析的数字的基数（默认为10）。
• 非数字字符串：如果字符串以非数字开头，parseInt() 返回 NaN。
• 忽略小数点：如果字符串包含小数点，parseInt() 会忽略小数点后的所有数字。

例子：

parseInt("123abc"); // 返回 123
parseInt("123.456"); // 返回 123
parseInt("abc123"); // 返回 NaN
parseInt("0xF", 16); // 返回 15 (十六进制)

使用场景 1： 当你需要从字符串中提取一个整数部分，特别是当字符串可能包含非数字字符时。

const numberStr = "123abc";
const number = parseInt(numberStr); // 返回 123

使用场景 2： 当你需要将字符串中的数字以特定的进制（如二进制、八进制、十六进制）解析为十进制整数。

const hexStr = "0xFF";
const decimal = parseInt(hexStr, 16); // 返回 255

Number()

• 转换任何值：Number() 可以转换任何类型的值到数字类型。
• 字符串：如果字符串是有效的数字表示（包括小数和指数），则转换为相应的数字。否则返回 NaN。
• 布尔值：true 转换为 1，false 转换为 0。
• null：转换为 0。
• undefined：转换为 NaN

例子：

Number("123abc"); // 返回 NaN
Number("123.456"); // 返回 123.456
Number(true); // 返回 1
Number(false); // 返回 0
Number(null); // 返回 0
Number(undefined); // 返回 NaN

使用场景 1： 当你需要将任何类型的值转换为数字，包括整数和浮点数。

const mixedValue = "123.456";
const numericValue = Number(mixedValue); // 返回 123.456

使用场景 2： 当你需要确保一个值是数字类型，无论是从字符串、布尔值还是其他原始类型转换。

const boolValue = true;
const numericBool = Number(boolValue); // 返回 1

一元加号 +

• 隐式转换：一元加号是 Number() 的简写形式，用于将变量转换为数字类型。
• 与 Number() 非常相似，唯一的区别在于 + 不能用于对象，而 Number() 可以尝试调用对象的 valueOf() 方法。
• 在将变量转换为数字时，+ 通常更简洁。

例子：

+"123abc"; // 返回 NaN
+"123.456"; // 返回 123.456
+true; // 返回 1
+false; // 返回 0
+null; // 返回 0
+undefined; // 返回 NaN

使用场景 1： 当你想要以更简洁的方式将变量转换为数字，特别是当你已经知道该变量是数字或可以转换为数字的字符串。

const value = "42";
const number = +value; // 返回 42

使用场景 2： 在数学表达式中，使用 + 来隐式转换值到数字类型，从而使代码更简洁。

const result = 5 + +"10"; // 返回 15

---

处理 NaN 的常见方法

当转换失败时，parseInt(), Number(), 和一元加号 + 都会返回 NaN，有时候需要做些处理。

1. 使用 isNaN() 函数检查值

isNaN() 函数用于检查一个值是否是 NaN

const value = "not a number";
const number = Number(value);if (isNaN(number)) {console.log("转换失败，值不是有效的数字");
} else {console.log("转换成功，值为：" + number);
}

2. 使用 Number.isNaN() 方法

Number.isNaN() 是ES6中引入的，它比全局的 isNaN() 函数更精确，因为它不会强制转换其参数。

const value = "not a number";
const number = Number(value);if (Number.isNaN(number)) {console.log("转换失败，值不是有效的数字");
} else {console.log("转换成功，值为：" + number);
}

3. 提供默认值

在转换失败时，你可以提供一个默认值来替代 NaN。

const value = "not a number";
const number = Number(value);const validNumber = isNaN(number) ? 0 : number; // 如果是NaN，则使用0作为默认值

4. 使用 try…catch 结构

如果转换失败可能会导致程序无法继续执行，可以使用 try…catch 来捕获异常。

const value = "not a number";try {const number = Number(value);if (isNaN(number)) {throw new Error("转换失败");}// 使用转换后的数字进行后续操作
} catch (error) {console.error(error.message);
}

5. 使用类型守卫

在TypeScript等静态类型语言中，可以使用类型守卫来确保变量是数字。

const value = "not a number";
const number = Number(value);function isNumber(n: any): n is number {return !isNaN(n);
}if (isNumber(number)) {// number 现在是数字类型
} else {// 处理非数字的情况
}