【JavaScript】isNaN()で指定した値が非数かどうか判別する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年05月10日に投稿されました。)

JavaScriptで指定指定した値が非数かどうか判別する方法として、isNaN()があります。

isNaN()とは、指定した値が非数であるかどうかを判別できるメソッドになります。

非数かどうかを判別するメソッドであるため、非数である場合は「true」を、そうでない場合は「false」の真偽値を返すようになります。

また、isNaN()を使用しなくても「==」や「===」で非数の判断ができると思いがちですが、その2つを使用すると期待していない結果が返ってきてしまうため注意が必要です。

そのため、処理の前に非数チェックを行いたい場合はisNaN()を使用するようにしましょう

今回はJavaSCriptのisNaN()で指定した値が非数かどうか判別する方法について紹介していきます。

この記事はこんな方におすすめ
・指定した値が非数であるかどうかを確認したい場合
・処理を行う前に非数チェックをしたい場合

isNaN()とは

isNaN()とは指定した値が非数かどうかを判定するメソッドとなります。

そもそも非数とは算術演算の結果が未定義または表現不可能な値となった時に表示される値になります。

isNaN()の書き方

isNaN()の書き方は下記のようになります。

isNaN()と記述し、括弧の中に引数を1つ追記すると使用できます。

isNaN()の引数

isNaN()の引数は下記のようになります。

  1. 対象の値(必須):
    非数かどうかを確認したい値を指定する

isNaN()は必須な引数として「対象の値」を指定します。

isNaN()の返り値

isNaN()の返り値はtrueやfalseの真偽値となります。

isNaN()で指定した値が数値かどうか判別するサンプルコード

isNaN()で指定した値が数値かどうか判別するサンプルコードをご紹介します。

ここでは下記の2つのパターンでisNaN()を使用します。

  1. 対象の値が非数である場合
  2. 対象の値が非数ではない場合

対象の値が非数である場合

対象の値が非数である場合にisNaN()を使用すると、「true」を返します。

● main.js

実行結果

対象の値が非数である場合にisNaN()を使用した結果

isNaN()によって要素が存在する配列に対して処理を行っています。

今回指定した数値は非数であるため、どちらとも「true」が表示されています。

対象の値が非数ではない場合

対象の値が非数ではない場合にisNaN()を使用すると、「false」を返します。

● main.js

実行結果

対象の値が非数ではない場合にisNaN()を使用した結果

isNaN()によって要素が存在しない配列に対して処理を行っています。

今回指定した数値は非数ではないため、どちらとも「false」が表示されています。

isNaN()の対象の値に数値以外の値を指定して使用する場合

isNaN()の対象の値に数値以外の値を指定しても使用することができます。

そのため、ここでは下記の3つの数値以外のパターンでisNaN()を使用します。

  1. 対象の値が文字列である場合
  2. 対象の値がブーリアンである場合
  3. 対象の値が配列である場合

対象の値が文字列である場合

isNaN()の対象の値が文字列である場合は「true」を返すようになります。

● main.js

実行結果

対象の値が文字列である場合にisNaN()を使用した結果

文字列は非数であることから、「true」が表示されています。

対象の値がブーリアンである場合

isNaN()の対象の値がブーリアンである場合は「false」を返すようになります。

● main.js

実行結果

対象の値がブーリアンである場合にisNaN()を使用した結果

ブーリアンは非数でないことから、「false」が表示されています。

対象の値が配列である場合

isNaN()の対象の値が配列である場合は「false」を返すようになります。

● main.js

実行結果

対象の値が配列である場合にisNaN()を使用した結果

配列は非数でないことから、「false」が表示されています。

isNaN()と等値性評価演算子(==/===)との違い

isNaN()で非数かどうかを判別してきましたが、等値性評価演算子である「==」や「===」を使用しても問題ないのではと思うのではないでしょうか?

結論から言うと、この2つの方法で確認を取った場合、isNaN()とは異なる結果を返すようになります。

例えば、「==」や「===」で非数確認を行った下記のコードを見てください。

● main.js

実行結果

等値性評価演算子(==/===)で非数かどうかを判別した結果

非数であるものの結果としてはfalseを返しています。

つまり、等値性評価演算子(== と ===)だと指定した値が「NaN」であったとしても非数であるかどうかの判別ができないということです。

それに比べてisNaN()は、指定した値が「NaN」である場合だと「true」を返し、それ以外は「false」を返すため、非数かどうかを正確に判別することができます。

以上のことから、非数かどうかを正確に確認したい場合には等値性評価演算子よりも、isNaN()を使用するようにしましょう。

isNaN()を使用した実際のケース

isNaN()を使用した実際のケースについてご紹介します。

ここでは、isNaN()を使用して入力された値や出力される結果が非数であるかどうかの確認をとるコードを作成します。

● index.html

● main.js

● style.css

実行結果

isNaN()を使用して入力された値の計算を行う画面を作成した結果

isNaN()によって入力された値や出力される結果が非数であるかどうかの確認をとっています。

そのため、入力した値が数値である場合は計算された結果が表示されますが、非数の場合はエラーメッセージがアラートで表示されています。

指定した値が非数であるかどうかを厳密に判別する場合

指定した値が非数であるかどうかを厳密に判別するにはNumber.isNaN()を使用します。

Number.isNaN()とは、渡された値が非数(NaN)であり、かつその型が数値型(Number)であるかどうかを判断するメソッドになります。

そのため、今回紹介しているisNaN()よりもセキュリティーが高めのメソッドになります。

● main.js

実行結果

Number.isNaN()指定した値が非数であるかどうかを厳密に判別した結果

Number.isNaN()によって入定した値が非数であるかどうかを厳密に判別しています。

そのため、数値型の「NaN」はtrueを返していますが、文字列型の「NaN」はfalseを返しています。

指定した値が有限数かどうか判別する場合

指定した値が有限数かどうか判別するにはisFinite()Number.isFinite()を使用します。

isFinite()やNumber.isFinite()とは指定した値が有限数かどうか判別することができるメソッドになります。

しかし、数値型かつ有限数であるNumber.isFinite()の方がセキュリティは高めになります。

isFinite()

● main.js

実行結果

isFinite()指定した値が有限数かどうか判別した結果

isFinite()によって指定した値が有限数かどうか判別しています。

そのため、数値型と文字列型の「123456」はtrueを返していますが、「Infinity」はfalseを返しています。

また、Number.isFinite()は下記のようになります。

Number.isFinite()

● main.js

実行結果

Number.isFinite()で指定した値が有限数かどうか厳密に判別した結果

Number.isFinite()によって指定した値が有限数かどうかを厳密に判別しています。

そのため、数値型の「123456」はtrueを返していますが、「Infinity」や文字列型の「123456」はfalseを返しています。

まとめ

⚫︎ isNaN()とは指定した値が非数かどうかを判定するメソッドである

⚫︎ isNaN()を使用するには下記の引数を指定する
・対象の値(必須)

⚫︎ 対象の値が非数である場合にisNaN()を使用すると、trueを返す

⚫︎ 対象の値が非数でない場合にisNaN()を使用すると、falseを返す

⚫︎ isNaN()の対象の値に数値以外の値を指定して使用すると下記のような結果になる
・対象の値が文字列である場合は「true」を返す
・対象の値がブーリアンである場合は「false」を返す
・対象の値が配列である場合は「false」を返す

⚫︎ 指定した値が非数であるかどうかを厳密に判別するにはNumber.isNaN()を使用する

⚫︎ 指定した値が有限数かどうか判別するには、isFinite()やNumber.isFinite()を使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA