【JavaScript】isNaN 和 Number.isNaN 的区别详解

在 JavaScript 中，我们经常需要判断一个值是否是 NaN（Not-a-Number，非数字）。JavaScript 提供了两个方法来进行 NaN 判断：isNaN() 和 Number.isNaN()。虽然它们的名字相似，但行为却存在明显的不同。本文将详细解析它们的区别，并结合示例帮助你更好地理解它们的实际应用。

一、什么是 NaN？

NaN（Not-a-Number）是 JavaScript 中的一个特殊值，表示无法计算出合法的数值。例如，0 / 0 或 parseInt('abc') 都会返回 NaN。NaN 具有以下特点：

• typeof NaN 仍然是 number，尽管它表示“不是数字”。
• NaN 与任何值都不相等，包括它自身，即 NaN !== NaN。
• isNaN(NaN) 返回 true。

二、isNaN() 的工作原理

isNaN(value) 是 JavaScript 提供的全局方法，它会尝试将传入的值转换为数值，然后检查该数值是否为 NaN。

示例：

console.log(isNaN(NaN));        // true
console.log(isNaN(10));         // false
console.log(isNaN('hello'));    // true （"hello" 无法转换成数字，最终变成 NaN）
console.log(isNaN(undefined));  // true （undefined 转换成 NaN）
console.log(isNaN(null));       // false （null 转换为 0）
console.log(isNaN('123'));      // false （字符串 "123" 可转换为数字 123）

isNaN() 的问题

isNaN() 的主要问题是它会在检查前尝试将参数转换为数值，导致一些非 NaN 值也被误判为 NaN。例如：

console.log(isNaN('123abc'));  // true （'123abc' 转换为 NaN）
console.log(isNaN(true));      // false （true 转换为 1）
console.log(isNaN(' '));       // false （空字符串转换为 0）

这意味着 isNaN() 在某些情况下可能会给出意外的结果。

三、Number.isNaN() 的工作原理

Number.isNaN(value) 是 ES6 引入的方法，它不会进行类型转换，只有当参数本身是 NaN 时才会返回 true。

示例：

console.log(Number.isNaN(NaN));        // true
console.log(Number.isNaN(10));         // false
console.log(Number.isNaN('hello'));    // false （不会进行类型转换）
console.log(Number.isNaN(undefined));  // false
console.log(Number.isNaN(null));       // false
console.log(Number.isNaN('123'));      // false
console.log(Number.isNaN('123abc'));   // false

Number.isNaN() 的优势

与 isNaN() 不同，Number.isNaN() 不会尝试转换类型，所以它的行为更加可靠。只有当值本身就是 NaN 时，它才会返回 true。

例如：

console.log(isNaN('hello'));          // true  （"hello" 转换为 NaN）
console.log(Number.isNaN('hello'));   // false （不会转换类型）

四、对比总结

方法	是否进行类型转换	只检测 NaN 本身	可靠性
isNaN(value)	是	否	低（可能误判）
Number.isNaN(value)	否	是	高（仅检测 NaN）

何时使用哪个方法？

• 如果你只想判断一个值是否真的为 NaN，使用 Number.isNaN()。
• 如果你需要检测一个值是否不能转换为合法数字，可以使用 isNaN()。

五、实战应用场景

1. 确保用户输入的是有效数字

在表单验证中，我们可能需要检查用户的输入是否是有效的数字：

function isValidNumber(input) {
    return !isNaN(input) && input !== '';
}

console.log(isValidNumber('123'));   // true
console.log(isValidNumber('abc'));   // false
console.log(isValidNumber('  '));    // false （空字符串被转换为 0，所以需要额外检查）

2. 过滤掉 NaN 值

在处理数据时，我们可能需要过滤掉 NaN 值：

const values = [1, '2', NaN, 'hello', undefined, 3];
const validNumbers = values.filter(v => Number.isFinite(Number(v)));
console.log(validNumbers);  // [1, '2', 3]

3. 避免误判

如果你使用 isNaN()，可能会误判非数字值，例如 undefined、'abc'，所以在严格场景下应使用 Number.isNaN()。

console.log(isNaN('abc'));          // true （误判）
console.log(Number.isNaN('abc'));   // false （正确）

推荐：

• JavaScript
• react
• vue

---