快捷導(dǎo)航

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

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

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

如何判斷一個(gè)值是否是 NaN

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

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

1. Number.isNaN() 使用示例

console.log(Number.isNaN(NaN));  // true
console.log(Number.isNaN(123));  // false
console.log(Number.isNaN('abc'));  // false，因?yàn)?'abc' 會(huì)被轉(zhuǎn)成 NaN，但此時(shí)返回的是 false

2. isNaN() 使用示例

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

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

如何處理 NaN

處理 NaN 時(shí)，我們需要考慮一些常見(jiàn)的情況，比如輸入無(wú)效值時(shí)如何避免 NaN 影響后續(xù)計(jì)算?？梢酝ㄟ^(guò)檢查值是否為 NaN 或提供默認(rèn)值來(lái)解決這一問(wèn)題。

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

在實(shí)際項(xiàng)目中，我們可以使用如下方法來(lái)處理 NaN，確保程序的健壯性。

示例一：用戶(hù)輸入時(shí)避免 NaN

假設(shè)我們正在開(kāi)發(fā)一個(gè)計(jì)算器應(yīng)用，用戶(hù)輸入的值可能會(huì)導(dǎo)致 NaN，我們可以在輸入后進(jìn)行驗(yàn)證和處理。

// 計(jì)算器應(yīng)用：處理用戶(hù)輸入
function addNumbers(a, b) {
    const num1 = parseFloat(a);
    const num2 = parseFloat(b);

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

    return num1 + num2;
}

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

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

示例二：為 NaN 提供默認(rèn)值

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

// 計(jì)算器應(yīng)用：為 NaN 提供默認(rèn)值
function addNumbers(a, b) {
    const num1 = parseFloat(a);
    const num2 = parseFloat(b);

    // 如果是 NaN，就給一個(gè)默認(rèn)值 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

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

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

當(dāng)進(jìn)行復(fù)雜的計(jì)算時(shí)，如果結(jié)果是 NaN，我們可以向用戶(hù)提示錯(cuò)誤信息，避免直接顯示 NaN 導(dǎo)致用戶(hù)困惑。

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

    if (Number.isNaN(total)) {
        return "計(jì)算錯(cuò)誤，請(qǐng)檢查輸入的價(jià)格和數(shù)量是否正確。";
    }

    return `總價(jià)是：${total}元`;
}

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

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

防止 NaN 的常見(jiàn)技巧

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

類(lèi)型轉(zhuǎn)換：確保輸入類(lèi)型正確，尤其是在處理用戶(hù)輸入時(shí)，使用 parseFloat、parseInt 等方法進(jìn)行類(lèi)型轉(zhuǎn)換。

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

// 處理 null 和 undefined 的情況
function safeAdd(a, b) {
    const num1 = a == null || isNaN(a) ? 0 : a;  // 對(duì) null 或 undefined 返回 0
    const num2 = b == null || isNaN(b) ? 0 : b;  // 對(duì) 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