一文詳解如何處理JavaScript中的NaN

更新時間：2025年01月08日 10:59:35 作者：瘋狂的沙粒

在?JavaScript?中,NaN（Not-a-Number）表示一個無效的數(shù)字值,通常,它出現(xiàn)在嘗試將無法轉(zhuǎn)換為數(shù)字的值與數(shù)字進行運算時,本文主要來聊聊如何處理JavaScript中的NaN,感興趣的可以了解下

如何判斷一個值是否是 NaN

Number.isNaN(value)：這是現(xiàn)代 JavaScript 中檢查 NaN 的推薦方法，只有當值嚴格為 NaN 時才返回 true，不會對非數(shù)字類型進行強制轉(zhuǎn)換。

isNaN(value)：這個方法會先將傳入的值轉(zhuǎn)換為數(shù)字，然后再判斷是否是 NaN，所以它可能會有一些不太符合直覺的行為。

1. Number.isNaN() 使用示例

console.log(Number.isNaN(NaN));  // true
console.log(Number.isNaN(123));  // false
console.log(Number.isNaN('abc'));  // false，因為 'abc' 會被轉(zhuǎn)成 NaN，但此時返回的是 false

2. isNaN() 使用示例

console.log(isNaN(NaN));  // true
console.log(isNaN(123));  // false
console.log(isNaN('abc'));  // true，因為 'abc' 無法轉(zhuǎn)換為數(shù)字，所以返回 true

從上面可以看到，Number.isNaN() 更為嚴格，推薦使用它來檢查 NaN。

如何處理 NaN

處理 NaN 時，我們需要考慮一些常見的情況，比如輸入無效值時如何避免 NaN 影響后續(xù)計算?？梢酝ㄟ^檢查值是否為 NaN 或提供默認值來解決這一問題。

解決方案：避免 NaN 的出現(xiàn)

在實際項目中，我們可以使用如下方法來處理 NaN，確保程序的健壯性。

示例一：用戶輸入時避免 NaN

假設我們正在開發(fā)一個計算器應用，用戶輸入的值可能會導致 NaN，我們可以在輸入后進行驗證和處理。

// 計算器應用：處理用戶輸入
function addNumbers(a, b) {
    const num1 = parseFloat(a);
    const num2 = parseFloat(b);

    // 檢查是否為有效的數(shù)字
    if (Number.isNaN(num1) || Number.isNaN(num2)) {
        return '輸入無效，請輸入數(shù)字。';
    }

    return num1 + num2;
}

console.log(addNumbers('10', '5'));  // 輸出：15
console.log(addNumbers('10', 'abc'));  // 輸出：輸入無效，請輸入數(shù)字。
console.log(addNumbers('abc', '5'));  // 輸出：輸入無效，請輸入數(shù)字。

在這個例子中，我們使用 parseFloat 將輸入轉(zhuǎn)換為浮動數(shù)字類型。如果轉(zhuǎn)換失敗，則返回 NaN。在調(diào)用 addNumbers 函數(shù)時，我們通過 Number.isNaN() 來確保兩個輸入都是有效的數(shù)字。如果其中一個是 NaN，我們就返回錯誤信息。

示例二：為 NaN 提供默認值

在某些情況下，我們可能希望在值為 NaN 時提供默認值。比如，當處理計算結(jié)果時，如果發(fā)生了 NaN，我們希望返回 0 或其他合適的默認值。

// 計算器應用：為 NaN 提供默認值
function addNumbers(a, b) {
    const num1 = parseFloat(a);
    const num2 = parseFloat(b);

    // 如果是 NaN，就給一個默認值 0
    const result = (Number.isNaN(num1) ? 0 : num1) + (Number.isNaN(num2) ? 0 : num2);
    
    return result;
}

console.log(addNumbers('10', '5'));  // 輸出：15
console.log(addNumbers('10', 'abc'));  // 輸出：10
console.log(addNumbers('abc', '5'));  // 輸出：5

在這個例子中，我們使用了三元運算符，在 NaN 出現(xiàn)時將其轉(zhuǎn)換為默認值（如 0），這樣即使用戶輸入了無效的數(shù)字，程序也能繼續(xù)正常運行。

示例三：通過條件判斷和提示消息處理 NaN

當進行復雜的計算時，如果結(jié)果是 NaN，我們可以向用戶提示錯誤信息，避免直接顯示 NaN 導致用戶困惑。

// 商品價格計算：檢查 NaN 并提示用戶
function calculatePrice(price, quantity) {
    const total = price * quantity;

    if (Number.isNaN(total)) {
        return "計算錯誤，請檢查輸入的價格和數(shù)量是否正確。";
    }

    return `總價是：${total}元`;
}

console.log(calculatePrice(100, 2));  // 輸出：總價是：200元
console.log(calculatePrice(100, 'abc'));  // 輸出：計算錯誤，請檢查輸入的價格和數(shù)量是否正確。
console.log(calculatePrice('abc', 2));  // 輸出：計算錯誤，請檢查輸入的價格和數(shù)量是否正確。

在這個例子中，calculatePrice 函數(shù)嘗試計算商品的總價。如果輸入的 price 或 quantity 不是有效的數(shù)字，計算結(jié)果將是 NaN。通過 Number.isNaN() 來檢查，如果是 NaN，我們返回一條友好的錯誤提示。

防止 NaN 的常見技巧

默認值：在進行數(shù)值計算時，確保如果值是 NaN，可以通過 || 或三元運算符等方式賦予默認值，避免程序崩潰。

類型轉(zhuǎn)換：確保輸入類型正確，尤其是在處理用戶輸入時，使用 parseFloat、parseInt 等方法進行類型轉(zhuǎn)換。

健壯的驗證：在程序中添加必要的校驗和錯誤處理，避免無效數(shù)據(jù)引發(fā) NaN。

// 處理 null 和 undefined 的情況
function safeAdd(a, b) {
    const num1 = a == null || isNaN(a) ? 0 : a;  // 對 null 或 undefined 返回 0
    const num2 = b == null || isNaN(b) ? 0 : b;  // 對 null 或 undefined 返回 0
    return num1 + num2;
}

console.log(safeAdd(5, 10));    // 輸出：15
console.log(safeAdd(5, null));  // 輸出：5
console.log(safeAdd(null, 10)); // 輸出：10
console.log(safeAdd(null, null));  // 輸出：0