数値チェックの方法3選 – isNaN() / isFinite() / 正規表現【JavaScript入門】

JavaScriptで数値チェックする方法、isNaN() / isFinite() / 正規表現を使ったやり方です。

JavaScriptでの数値チェックの方法

主に下記の3つの方法があります。

数値チェック方法	説明
Number.isNaN()メソッド	渡された値が “NaN” で、その型が “Number” であるかどうかを判断
Number.isFinite()メソッド	渡された値が”有限数”であるかどうかを判断。
正規表現	0-9の文字列かどうかパターンマッチすることで数値チェック

Number.isNaN()

Number.isNaN() メソッド

渡された値が 「NaN」 で、その型が 「Number」 であるかどうかを判断します。

※NaN (Not a Number)

構文

Number.isNaN(テストしたい値)

引数

テストしたい値

返値

true

テストしたい値がNaN(Not a Number) かつその型が Number である場合

false

それ以外の場合

サンプルコード

 Number.isNaN(NaN);        // ⇒ true
 Number.isNaN(Number.NaN); // ⇒ true
 Number.isNaN(0 / 0);      //  ⇒ true

 //  グローバル関数.isNaN()との違い。　isNaNでは "true" が返される

 Number.isNaN('NaN');      // ⇒false
 Number.isNaN(undefined);  // ⇒false
 Number.isNaN({});         // ⇒false
 Number.isNaN('blabla');   // ⇒false

 // 以下、返り値: false 

Number.isNaN(true); // ⇒false
Number.isNaN(null); // ⇒false
Number.isNaN(37); // ⇒false
Number.isNaN('37'); // ⇒false
Number.isNaN('37.37'); // ⇒false
Number.isNaN('');  // ⇒false
Number.isNaN(' '); // ⇒false

説明

ECMAScript 2015 で定義されているNumberオブジェクトのメソッド Number.isNaN() 

元となるグローバルメソッドの isNaN()と比較して、実際には NaNではないのに強制型変換されることがないのでより安全です。

JavaScriptのデータの”型”についてはこちらの記事もご参考ください。

【JavaScriptのデータ型の種類一覧】 プリミティブ型、オブジェクト型の違いとは？ typeofで型の調べ方

isFinite

Number.isFinite() メソッドは、渡された値が有限数であるかどうかを判断します。

構文

Number.isFinite(テストしたい値)

引数

有限数かどうかテストしたい値。

返値

false

テストしたい値が NaN 、正の無限大( Infinity )、負の無限大( -Infinity )の場合

true

それ以外

サンプルコード

Number.isFinite(Infinity);  　// 　⇒false
Number.isFinite(NaN);       //　⇒false
Number.isFinite(-Infinity); 　// ⇒false
Number.isFinite(0);         // ⇒true
Number.isFinite(2e64);      //　⇒true

 //  グローバル関数.isFinite()との違い。　isNaNでは "true" が返される
Number.isFinite('0');       // ⇒false,
Number.isFinite(null);      // ⇒false

説明

isFinite() グローバル関数と比較すると、このメソッドは強制的に引数を数値に変換しない。

数値型の値で、有限数である場合のみ、 true を返すので安全です。

正規表現

正規表現オブジェクト RegExp を使って

regexp = new RegExp(patern[, flags])

0-9の文字列かどうかパターンマッチすることで数値チェックしています、

サンプルコード

【例1】値が「0〜9」を数値チェック

// 値が0～9のみの場合、trueを返します。

 function isNumber(val){
   var regex = new RegExp(/^[0-9]+$/);
   return regex.test(val);
 } 

【例2】値が「0-9で、マイナス(-)も含む」数値チェック

// 値が正数/負数の整数値の場合にtrueを返します。(マイナス-がついてても対応)

 function isNumber(val){
   var regex = new RegExp(/^[+-]?[0-9]+$/);
   return regex.test(val);
 } 

【例3】値が「0-9で、マイナス(-)、少数も含む」数値チェック

// 値が正数/負数の整数値/小数値の場合にtrueを返します。(小数にも対応)

function isNumber(val){
   var regex = new RegExp(/^[-+]?[0-9]+(\.[0-9]+)?$/);
   return regex.test(val);
 } 

まとめ

JavaScriptで数値チェックする方法、isNaN() / isFinite() / 正規表現を使ったやり方でした。

JavaScriptの学習講座、エンジニアの転職

あわせて読みたい記事

JavaScriptとは？ タイプ別 入門/初心者向けおすすめ本5選【プログラミング】

【CodePenとは？】無料のWebコードエディタで使い方、ブログへの埋め込み方法。

JSONの書き方

【Anime.js入門】JavaScriptアニメーション基礎入門（変形編）

あわせて読みたい書籍