Number.isNaN() в JavaScript — чи значення є NaN

Загальний опис

Number.isNaN() — це статичний метод в JavaScript, що дозволяє перевірити, чи є задане значення спеціальним значенням "Not-a-Number" (NaN). Його основна корисність полягає в здатності точно розрізняти значення NaN від інших значень. На практиці це може бути корисно, коли потрібно виявити помилкові операції, які призводять до NaN, особливо під час роботи з математичними обчисленнями.

По-перше, давайте розглянемо, як використовувати Number.isNaN() в базових ситуаціях. Цей метод приймає один аргумент та повертає true, якщо значення цього аргументу є NaN, і false - в іншому випадку.

console.log(Number.isNaN(NaN));        // true
console.log(Number.isNaN(42));        // false
console.log(Number.isNaN('42'));      // false

Зверніть увагу, що Number.isNaN() відрізняється від глобальної функції isNaN(). Остання перетворює свій аргумент в число, тому може вважати деякі значення "не числами", хоча насправді вони ними не є.

console.log(isNaN('Hello'));     // true, оскільки 'Hello' не може бути перетворено в число
console.log(Number.isNaN('Hello')); // false, оскільки 'Hello' не є NaN

Основна відмінність полягає у тому, що Number.isNaN() не намагається перетворити введене значення на число. Це робить його надійнішим для перевірки, чи є конкретне значення дійсно NaN.

Важливо пам'ятати, що NaN у JavaScript має декілька унікальних особливостей. Наприклад, NaN не є рівним самому собі. Тому пряма порівняльна перевірка value === NaN завжди повертає false. Саме тому метод Number.isNaN() стає таким корисним у певних обставинах.

правити

Порада

Незважаючи на те, що Number.isNaN() корисний для виявлення значень NaN, ви завжди повинні використовувати додаткові перевірки при валідації даних, щоб впевнитись, що ви отримали числове значення, яке очікували.

автор: Bond правити

Порада

Завжди додавайте відповідні перевірки перед використанням математичних операцій, щоб уникнути випадкового отримання NaN. Якщо під час операцій ви отримаєте NaN, це може призвести до неправильних результатів у подальших обчисленнях.

автор: Bond правити

Порада

Хоча обидві функції називаються isNaN, вони працюють трохи по-різному. Number.isNaN() є більш надійним методом для перевірки на NaN, оскільки він не змінює тип своїх аргументів.

isNaN("abc");        // true
Number.isNaN("abc"); // false

автор: Bond правити

Порада

Number.isNaN() повертає true лише для значень, які є саме NaN. Це допоможе вам виключити інші "не числові" значення з вашої перевірки.

Number.isNaN(undefined); // false
Number.isNaN({});        // false

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Number.isNaN(value)

Параметри

value

Значення, яке необхідно перевірити на NaN.

автор: Bond

правити

Повернення

boolean

Повертає булеве значення true, якщо подане значення є числом із значенням NaN. В іншому випадку повертає false.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	25	15	9	15	12	—

Підтримка: мобільні переглядачі

Переглядач
	4.4	25	15	9

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const result1 = 5 / "text";  // Намагаємося поділити число на текстовий рядок
const result2 = 10 / 2;     // Звичайне ділення

console.log(Number.isNaN(result1));  // true
console.log(Number.isNaN(result2));  // false

function convertToNumber(str) {
    const num = Number(str);

    // Перевіряємо, чи є результат конвертації "не числом"
    if (Number.isNaN(num)) {
        return "Конвертація не вдалася! Будь ласка, введіть вірний рядок для конвертації.";
    }

    return num;
}

const str1 = "25.5";
const str2 = "Hello";

console.log(convertToNumber(str1));  // 25.5
console.log(convertToNumber(str2));  // Конвертація не вдалася! Будь ласка, введіть вірний рядок для конвертації.

<header>
  <h2 class="title">Number.isNaN()</h2>
  <p class="description">Перевірка значення на NaN</p>
</header>
<main>
  <div class="result">
    <input type="text" id="inputValue" placeholder="Введіть значення для перевірки">
    <button onclick="checkNaN()">Перевірити</button>
    <p id="output">Результат: </p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#inputValue {
  padding: 10px;
  margin-right: 10px;
}

button {
  padding: 10px 15px;
  cursor: pointer;
  border: none;
  background-color: #4CAF50;
  color: white;
}

function checkNaN() {
  const inputValue = document.getElementById('inputValue').value;
  const output = document.getElementById('output');

  if (Number.isNaN(Number(inputValue))) {
    output.innerHTML = "Результат: це NaN!";
  } else {
    output.innerHTML = "Результат: це не NaN!";
  }
}
//# sourceURL=pen.js