Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

癖あるNaNの判別方法、isNaN関数の問題

NaN === NaN

先日入力された文字列を数値に変換するために parseInt()を使用しまして、その際parseIntは最初の文字が数値に変換できない場合 NaNを返すのでそれを利用して数値と数値以外を分けるif文を書こうとしたんですが

サンプル
const test = prompt('数値を入力してください');
const number = parseInt(test);
if(number === NaN){
  alert('不正な値');
} else {
  alert('正常な値');
}

サンプルコード(Codepen)
こんな感じでif文に 変換された値 === NaNという条件式を書いたのですが、実行してみたら全ての文字が正常な値として認識されました、キャンセル押しても正常な値として認識されます。

ちょっと調べてみたら NaN === NaNだと falseが返ってくるようで、 こういう時はisNaNという関数を使うということがわかりました。

なぜfalseと返ってくるのかは以下のサイトで詳しく解説されていました
NaN === NaN が false な理由とutil.isDeepStrictEqual

isNaN関数を使う

サンプル
const test = prompt('数値を入力してください');
const number = parseInt(test);
if(isNaN(number)){
  alert('不正な値');
} else {
  alert('正常な値');
}

サンプルコード

数値以外を入力したら不正な値として認識されるようになりました。


しかし、isNaNにはとある問題があるということがわかりました。

isNaNの問題点

isNaNは、引数が数値ではなかった場合、まず暗黙の型変換によって数値に変換されてしまうようで、以下の記述だとおかしな結果になってしまいます

isNaNの判別
console.log(isNaN(NaN)); //true
console.log(isNaN(1)); //false
console.log(isNaN('NaN')); //true
console.log(isNaN()); //true

サンプルコード
isNaN関数は「数値であることをチェックする関数」ではなく「数値でないことをチェックする関数」であると考えられているようです。

このような問題を解決するためには、 Number.isNaNを使うようです。

Number.isNaN

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

サンプルコード

これで、きちんとNaNの時だけtrueが返ってくるようになりました。

しかし、Number.isNaNは、比較的新しく定義されたもの(ECMAScript6から)らしく、ブラウザによっては対応されてないのものもあるそうです、そういう時は、自分でNumber.isNaNを作る必要があります

Number.isNaNを作る

サンプル
Number.isNaN = Number.isNaN || function(value) {
    return typeof value === "number" && value !== value;
}

こういったブラウザ間の機能を埋めることを「ポリフィル(polyfill)」と言うようです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
6
Help us understand the problem. What are the problem?