LearnJS

isNaN()

isNaN() - это встроенная функция JavaScript, которая проверяет, получилось ли значение NaN.

NaN появляется, когда JavaScript пытался получить число, но не смог. Например, если преобразовать строку ‘JavaScript’ в число.

let value = Number('JavaScript');

console.log(value);
console.log(isNaN(value));

Результат:

NaN
true

Функция вернула true, потому что в переменной value лежит NaN.

Что такое isNaN()

isNaN() проверяет значение и возвращает логический результат: true или false.

Если значение является NaN или превращается в NaN при числовом преобразовании, результат будет true.

console.log(isNaN(NaN));
console.log(isNaN('JavaScript'));

Результат:

true
true

Если значение можно нормально представить как число, результат будет false.

console.log(isNaN(25));
console.log(isNaN('25'));

Результат:

false
false

На первый взгляд это может выглядеть странно: строка ‘25’ не является числом. Но isNaN() сначала пытается преобразовать ее в число, а потом уже проверяет результат.

Синтаксис

Общая запись выглядит так:

isNaN(value);

value - значение, которое нужно проверить.

let result = isNaN('10');

console.log(result);

Результат:

false

Строка ‘10’ превращается в число 10, поэтому это не NaN.

Что такое NaN

NaN означает Not a Number, то есть “не число”.

Такое значение появляется, когда JavaScript ожидал получить число, но нормального числового результата не получилось.

console.log(Number('урок'));
console.log('JavaScript' * 2);
console.log(parseInt('px100', 10));

Результат:

NaN
NaN
NaN

Во всех трех случаях JavaScript пытался работать с числом, но исходные данные для этого не подошли.

У NaN есть необычная особенность: он не равен даже самому себе.

console.log(NaN === NaN);

Результат:

false

Именно поэтому для проверки используют специальные функции, например isNaN() или Number.isNaN().

Как работает isNaN()

isNaN() сначала пытается привести значение к числу, а потом проверяет, получилось ли NaN.

console.log(isNaN('100'));
console.log(isNaN('100px'));
console.log(isNaN('text'));

Результат:

false
true
true

Строка ‘100’ нормально превращается в число 100, поэтому результат false.

Строки ‘100px’ и ‘text’ через Number() превращаются в NaN, поэтому результат true.

Это поведение удобно, когда мы хотим проверить, можно ли значение использовать как число.

Проверка после Number()

Частый сценарий - сначала преобразовать значение через Number(), а потом проверить, получилось ли нормальное число.

let value = Number('15');

console.log(isNaN(value));

Результат:

false

Число получилось, поэтому isNaN() вернул false.

let value = Number('пятнадцать');

console.log(isNaN(value));

Результат:

true

В этом примере преобразование дало NaN, значит значение не подходит для обычных вычислений.

Такую проверку удобно использовать перед расчетами:

let value = Number('20');

if (isNaN(value)) {
  console.log('Введите число');
} else {
  console.log(value * 2);
}

Результат:

40

isNaN() и строки

Со строками важно помнить: isNaN() не просто смотрит на тип значения. Он пытается преобразовать строку в число.

console.log(isNaN('10'));
console.log(isNaN('10.5'));
console.log(isNaN('10px'));
console.log(isNaN('JavaScript'));

Результат:

false
false
true
true

Строки ‘10’ и ‘10.5’ можно превратить в числа, поэтому результат false.

Строки ‘10px’ и ‘JavaScript’ через Number() дают NaN, поэтому результат true.

Если нужно достать число из строки вроде ‘10px’, сначала используем parseInt() или parseFloat(), а потом проверяем результат.

let width = parseInt('10px', 10);

console.log(isNaN(width));

Результат:

false

Почему результат может удивить

Так как isNaN() выполняет числовое преобразование, некоторые значения дают не самый очевидный результат.

console.log(isNaN(''));
console.log(isNaN('   '));
console.log(isNaN(true));
console.log(isNaN(false));
console.log(isNaN(null));
console.log(isNaN(undefined));

Результат:

false
false
false
false
false
true

Пустая строка, строка из пробелов, false и null при числовом преобразовании дают 0. Значение true дает 1. Поэтому для них isNaN() возвращает false.

undefined превращается в NaN, поэтому результат true.

На первых порах главное запомнить: isNaN() отвечает не на вопрос “это тип number?”, а на вопрос “получится ли здесь NaN при попытке получить число?”.

Number.isNaN()

В JavaScript есть более строгая проверка - Number.isNaN().

Она возвращает true только тогда, когда переданное значение уже является настоящим NaN. Автоматического преобразования здесь нет.

console.log(Number.isNaN(NaN));
console.log(Number.isNaN(Number('text')));
console.log(Number.isNaN('text'));
console.log(Number.isNaN('10'));

Результат:

true
true
false
false

Строка ‘text’ сама по себе не является NaN, поэтому Number.isNaN(‘text’) возвращает false.

Если значение уже преобразовано в число, Number.isNaN() часто понятнее:

let value = Number('text');

console.log(Number.isNaN(value));

Результат:

true

Здесь в переменной value лежит именно NaN, поэтому строгая проверка сработала.

isNaN() и prompt()

prompt() всегда возвращает строку. Если пользователь должен ввести число, данные нужно преобразовать и проверить.

let value = prompt('Введите число');
let numberValue = Number(value);

if (isNaN(numberValue)) {
  console.log('Это не число');
} else {
  console.log(numberValue * 2);
}

Если пользователь введет 10, в консоли будет:

20

Если пользователь введет привет, в консоли будет:

Это не число

С пустой строкой нужно быть внимательным. Number(”) дает 0, поэтому isNaN() не посчитает пустой ввод ошибкой.

let value = '';

console.log(Number(value));
console.log(isNaN(Number(value)));

Результат:

0
false

Если пустой ввод запрещен, его лучше проверять отдельно до преобразования.

let value = prompt('Введите число');

if (value === '') {
  console.log('Поле не должно быть пустым');
} else {
  let numberValue = Number(value);

  if (isNaN(numberValue)) {
    console.log('Это не число');
  } else {
    console.log(numberValue);
  }
}

Когда использовать isNaN()

isNaN() удобно использовать, когда нужно понять, можно ли значение использовать в вычислениях после числового преобразования.

let value = Number('35');

if (!isNaN(value)) {
  console.log(value + 5);
}

Результат:

40

Если значение уже точно должно быть числом, часто лучше использовать Number.isNaN(). Так код становится строже и понятнее.

let value = Number('урок');

if (Number.isNaN(value)) {
  console.log('Не получилось получить число');
}

Результат:

Не получилось получить число

Итого

isNaN() проверяет, получится ли NaN после попытки привести значение к числу. Если получается NaN, функция возвращает true. Если получается обычное число, возвращает false.

isNaN(value);

Главное запомнить: isNaN() выполняет автоматическое числовое преобразование. Поэтому для уже преобразованных значений часто удобнее и понятнее использовать строгую проверку Number.isNaN().