【JavaScript入門】数値チェックの方法まとめ(isNaN/isFinite)

貝原 輝昌
書いた人 貝原 輝昌

こんにちは!Webコーダー・プログラマーの貝原(@touhicomu)です。

今日は、JavaScriptの数値のチェック方法について解説したいと思います。

数値のチェック方法を考えてみると、

  • 変数が数値かどうかチェックしたい!うまい正規表現とかないの?
  • 小数点、カンマ、+符号、-符号、0始まりも考慮してチェックして欲しい。
  • 数値の範囲や桁数をチェックしたい!うまい方法はないの?

などの疑問が浮かぶのもうなづけます。

そこで!今日は、

  • 数値かどうかのチェック方法
  • 小数点、カンマなどのチェック方法
  • 数値の範囲や桁数のチェック方法

について、解説したいと思います。

それでは、行ってみましょう!

数値かどうかのチェック方法

isNaNによる方法

値が数値であるかどうかチェックする方法の一つとして、「数値でないときにtrueとなる」isNaN(is Not a Number)メソッドによる方法があります。

isNaNがどういう値の時trueを返し(値が数値でない)、どういう値の時falseを返す(値が数値)のか、以下、実際のコードで確認してみましょう。

実行結果

以上のように、明らかに数値でない文字列と、undefined、配列とオブジェクト、それにNaNの場合にisNaN()はtrueを返し、数値でないと判断しています。

ただし、nullの場合はisNaN()はfalseを返し、数値であると判断しています。これは、nullは数字上0と扱われるためです。

数値と解釈できる文字列、8進数の数値リテラル(0から始まる数値)と、16進数の数値リテラル(0xで始まる数値)の場合や、無限大を表す数値リテラルInfintyの場合、Boolean型の値の場合は、isNaN()はfalseを返し、数値であると判断しています。

NaNについてはこちらの記事で解説しているので、ぜひ確認してください。

isFiniteによる方法

値が数値であるかどうかチェックする方法として「有限の数値であるにtrueとなる」isFiniteメソッドによる方法があります。

isFiniteがどういう値の時trueを返し(値が有限の数値)、どういう値の時falseを返す(値が有限の数値でない)のか、以下、実際のコードで確認してみましょう。

実行結果

以上のように、明らかに数値でない文字列と、undefined、配列とオブジェクト、それに無限大Infinityと非数値NaNの場合にisFinite()はfalseを返し、有限の数値でないと判断しています。

ただし、nullの場合はisFinite()はtrueを返し、有限の数値であると判断しています。これは、nullは数字上0と扱われるためです。

数値と解釈できる文字列、8進数の数値リテラル(0から始まる数値)と、16進数の数値リテラル(0xで始まる数値)の場合、Boolean型の値の場合、isFinite()はtrueを返し、有限の数値であると判断しています。

数値変換後のチェックについて

これまでご紹介したチェック方法は、数値を変換したあとに正しく処理が行われたかどうかを確認するときによく使われます。

そこで、簡単なサンプル例をもとに変換後のチェック例を解説しておきます!

例えば、「300px」という値をそのまま数値変換した場合を見てみましょう。

実行結果

この例では、数値変換するためにNumberオブジェクトの引数として「300px」という文字列を代入しています。

しかしながら、「px」という文字列が含まれているので変換後の値は「NaN」の扱いになります。

そこで、IF文を使い条件式として「isNaN()」をもとに「true / false」を返すようにしているわけです。

このように記述すれば、数値として変換されなかった場合には事前に何らかのアクションを起こすことが可能なので、不明なバグに時間を費やすこともなくなるでしょう。

ちなみに、さらなる数値変換のサンプル事例や小数点・カンマ区切りなどによる変換例を、次の記事で詳しく解説しているのでぜひ参考にしてみてください!

正規表現による方法

正規表現に数値を表す文字列がマッチするかどうかで、数値のチェックを行ってみましょう。

指定した正規表現に含まれる値をチェックするためには、searchメソッドを使用します。

数値を表す正規表現は、/^[0-9]+$/ で、これは、「0~9の数字が行頭から行末まで並んでいる」文字列とマッチします。

このように今節で使用する正規表現は簡潔なもので、まずは正規表現での数値チェックの流れを確認するためのものです。

より詳細な、カンマつき、小数点つきの数字などのチェックは次章で解説します。

実行結果

以上のように、明らかに数字である変数n01は0文字目から正規表現とマッチするので、返値が0でした。

また、明らかに数字でない変数n02は正規表現とマッチしないので、返値が-1(マッチなしの意味)でした。

小数点、カンマなどのチェック方法

正規表現で数値をチェックする際に、

  • 小数点
  • カンマ区切り
  • 0始まりの数字
  • +符号
  • -符号

を考慮してみましょう。

以上を考慮した正規表現は、

‘^(\\+|\\-)?(0[1-9]{0,2}|\\d{0,3}*)(,\\d{3})*(\\.[0-9]+)?$’ 

となります。

上の正規表現の各部の意味は以下の表の通りです。

正規表現 正規表現の意味
\\d{0,3} 数字(0桁~3桁)
(\\.[0-9]+)? 小数点つき数字
(,\\d{3})* カンマつき数字(3桁ずつ連続)
0[1-9]{0,2} 0つき数字(1桁~3桁)
(\\+|\\-)? +符号、-符号

それでは、実際にコードで確認してみましょう。

実行結果

小数点、カンマ、0埋め、+符号、-符号が正しくついている数字を表す文字列は、正規表現検索のsearch()メソッドの返値が0(正規表現が文字列の0文字目からと一致)となっています。

また、明らかに数字でない変数n05と、0埋めの数字が4桁になっていてカンマの位置が違ってしまっている変数n06は正規表現検索のsearch()メソッドの返値が-1(一致なし)となっています。

小数点・カンマ変換後のチェック

小数点・カンマ区切りの数値に関して、正規表現でチェックする方法を学習しましたが、実践的な例として数値変換したあとにチェックする方法も身につけておきましょう!

まず最初に、先ほど学習した正規表現でのチェックを関数化していつでも使えるようにしておきます。

「check()」関数を新しく作成し、中身は先ほど学習した正規表現をそのまま代入しているだけです。

ただし、「search()」メソッドを使った返り値は使いやすいように「true / false」で返すようにIF文で条件分岐させています。

次に、この関数を活用して小数点をカンマ区切りに変換した値が、正しく処理されたかをチェックしてみましょう!

実行結果

この例では、「1234567.890」という小数点に正規表現を使ってカンマ区切りを挿入しているのですが、グローバルフラグを付け忘れています。

そのため、最初にマッチした箇所だけカンマ区切りが挿入されているので「1,234567.89」となり、正しく処理が行われていません。

この時に、先ほど作成した「check()」関数を使って条件分岐させてみると、正しく処理がされていないのが実行結果を見ても分かりますね。

数値の範囲チェック方法

JavaScriptで数値の範囲チェックを行うには、自分で実装する必要があります。

まずは、値が有限の範囲であるかをチェックするコードを見てみましょう。
なお、無限大、無限小のリテラルについては、下記URLの「3 数値型でさまざまな値を取得する方法」の章を参考にしてください。

コードは、if文内の条件式で、変数nが最大値と最小値の範囲に入ってるかどうかを比較演算子 <、> でチェックしています。

実行結果

以上のように、変数nは有限の数字です。

また、任意の最大値、最小値の範囲内であるかどうかをチェックするコードも見てみましょう。

コードは、if文内の条件式で、変数nが最大値と最小値の範囲に入ってるかどうかを比較演算子 <=、>= でチェックしています。

実行結果

以上のように、変数n(==100)は、範囲110~120の間にはありませんでした。

小数点・カンマを扱う方法

数値の桁数チェック方法

最後に、数値の桁数をチェックする方法について学習をしていきましょう!

まず最初に、JavaScriptでは桁数をチェックするメソッドが用意されていないので、自分で実装する必要がある点に注意しましょう。

そこで、簡単なサンプル例として数値の桁数をチェックする関数を次のように自作してみます!

実行結果

この例では、与えられた数値を文字列に変換したうえで文字数を数えるという処理を行っています。

このようにすることで数値の桁数が数えられるわけですが、マイナス値の場合に「 – 」も含めて数えてしまうため、Math.abs()を使って絶対値を取得するのを忘れないようにしましょう。

他にも、数値における桁区切りや桁数の数え方の事例について、次の記事で詳しくコード例とともに解説していますのでぜひ参考にしてみてください!

小数点以下の桁数チェック方法

次に、小数点以下の桁数をチェックする方法も考えてみましょう!

ポイントは、小数点である「. (ドット)」を活用して数値を2つに分割するという点です。

例えば、「123.45」という小数点があった場合に、「123」と「45」の2つに分割すれば「45」が2桁の数値であることは先ほどの例からも明らかですよね。

そこで、次のようなチェック関数を自作してみましょう!

実行結果

この例では、数値を文字列に変換したあとに「split()」を使って「. (ドット)」の前後で2つに分割しています。

このようにすることで配列化されるわけですが、1番目の要素に小数点以下の数値が格納されているので、lengthを使って文字数を数えれば良いわけです。

今回自作した「check()」関数は、第1引数にチェックしたい小数点を当てはめて、第2引数に桁数を指定しています。

例えば、「check(123.456, 3)」であれば、「123.456」が小数点以下3桁であるかどうかをチェックするという意味になるわけです。

数値変換後の桁数チェック方法

最後に、小数点以下の桁数変換を行った際に、先ほど自作した関数を使ってチェックする方法をご紹介しておきます。

JavaScriptでは小数点以下の桁数変換に「toFixed()」を使うのが一般的です。

次のサンプル例を見てください!

実行結果

この例では、「toFixed(2)」とすることで小数点以下の桁数を2桁に指定できているのが実行結果からも確認できますね。

そこで、先ほど自作した関数を使って正しく処理がされているのかをチェックしてみましょう!

実行結果

この例では、指定の桁数を「digit」に代入し、toFixed()関数で小数点以下の桁数変換を行っています。

その後に、check()関数を使い目的の桁数に正しく変換されたことをチェックしているのが実行結果からも確認できますね。

数値や小数点の桁数変換は一般的なプログラムにもよく出てくるので、このようなチェック方法をぜひ参考にしてみてください!

まとめ

いかがでしたでしょうか。

簡単に変数値が数値であるかどうかを確認するのは、isNaN()isFinite()を使う方が便利でした。

また、文字列が数値であるかどうかを確認するのは、正規表現を用いることが適切でした。
文字列を正規表現でマッチさせる処理よく使われるコードなので、ぜひ、ここで使い方を覚えておいてください。

また、数値の範囲チェック桁数チェックをするためには、自分でコードを実装する必要がありました。不便と感じるかもしれませんが、自分で実装する分自由に応用が利きますので、ぜひ、覚えておいてください。

JavaScriptの数値のチェックについて忘れてしまったら、またこのページをご覧になってください!

JavaScriptカリキュラム無料公開中!


この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。

JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

非常識な結果を出す卒業生多数!

エンジニアキャリア戦略

人気記事セレクション

3000名以上来場の人気セミナーが開催決定

18歳で時給6000円だった侍エンジニア塾代表の木内より、『プログラミングで人生を変える』ための学習方法をお教えます。

0からプログラミングを習得し、フリーランスエンジニアになる方法プログラミング学習の効率を劇的に上げる学習メソッドを解説しますので、奮ってご参加ください。

  • 日付:3/30(日)
  • 時間:14:00〜17:00終了予定
  • 場所:当社 道玄坂オフィス
  • 住所:〒150-0043 東京都渋谷区道玄坂2丁目11-1 Gスクエア渋谷道玄坂 4F *Googleマップでは「東京都渋谷区道玄坂2丁目11-1」で検索してください。近隣にスクエア渋谷という別のビルがあるためご留意ください。
  • 参加費:無料
  • URL:https://seminar.sejuku.net/
詳しくは下の画像をクリックして弊社セミナー内容をご確認ください。

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

貝原 輝昌

貝原 輝昌

こんにちは!貝原(@touhicomu)と申します。
現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。
現住所は、日本の西海岸、長崎県は波佐見町です。田舎ライフです。^^
地元の観光団体「笑楽井石」にボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。
以下の活動も行っています。
 ・笑楽井石のブログ
 ・エクセル関数を日本語化するソフト
 ・エクセルVBAを日本語で記述するソフト