こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。
今日は、JavaScriptの数値のチェック方法について解説したいと思います。
数値のチェック方法を考えてみると、
- 変数が数値かどうかチェックしたい！うまい正規表現とかないの？
- 小数点、カンマ、+符号、-符号、0始まりも考慮してチェックして欲しい
- 数値の範囲や桁数をチェックしたい！うまい方法はないの？
などの疑問が浮かぶのもうなづけます。
そこで！今日は、
- 数値かどうかのチェック方法
- 小数点、カンマなどのチェック方法
- 数値の範囲や桁数のチェック方法
について、解説したいと思います。
それでは、行ってみましょう！
数値かどうかのチェック方法
isNaNによる方法
値が数値であるかどうかチェックする方法の一つとして、「数値でないときにtrueとなる」isNaN（is Not a Number）メソッドによる方法があります。
isNaNがどういう値の時trueを返し（値が数値でない）、どういう値の時falseを返す（値が数値）のか、以下、実際のコードで確認してみましょう。
window.onload = function () {
// 数値かどうかのチェック方法
// isNaNによる方法
// isNaNは、数値ではない場合にtrueになる
console.log('isNaN("abc") = ' + isNaN("abc"));
console.log('isNaN("123abc") = ' + isNaN("123abc"));
console.log('isNaN("123") = ' + isNaN("123"));
console.log('isNaN(123) = ' + isNaN(123));
console.log('isNaN([1, 2]) = ' + isNaN([1, 2]));
console.log('isNaN({ a: 1 }) = ' + isNaN({ a: 1 }));
// 8進数 / 16進数
console.log('isNaN(0755) = ' + isNaN(0755));
console.log('isNaN(0xFF) = ' + isNaN(0xFF));
// true / false
console.log('isNaN(true) = ' + isNaN(true));
console.log('isNaN(false) = ' + isNaN(false));
// その他
console.log('isNaN(Infinity) = ' + isNaN(Infinity)); // 無限大
console.log('isNaN(undefined) = ' + isNaN(undefined));
console.log('isNaN(null) = ' + isNaN(null));
console.log('isNaN(NaN) = ' + isNaN(NaN));
}
実行結果
isNaN("abc") = true
isNaN("123abc") = true
isNaN("123") = false
isNaN(123) = false
isNaN([1, 2]) = true
isNaN({ a: 1 }) = true
isNaN(0755) = false
isNaN(0xFF) = false
isNaN(true) = false
isNaN(false) = false
isNaN(Infinity) = false
isNaN(undefined) = true
isNaN(null) = false
isNaN(NaN) = true
以上のように、明らかに数値でない文字列と、undefined、配列とオブジェクト、それにNaNの場合にisNaN()はtrueを返し、数値でないと判断しています。
ただし、nullの場合はisNaN()はfalseを返し、数値であると判断しています。これは、nullは数字上0と扱われるためです。
数値と解釈できる文字列、8進数の数値リテラル(0から始まる数値）と、16進数の数値リテラル（0xで始まる数値）の場合や、無限大を表す数値リテラルInfintyの場合、Boolean型の値の場合は、isNaN()はfalseを返し、数値であると判断しています。
NaNについてはこちらの記事で解説しているので、ぜひ確認してください。
isFiniteによる方法
値が数値であるかどうかチェックする方法として「有限の数値であるにtrueとなる」isFiniteメソッドによる方法があります。
isFiniteがどういう値の時trueを返し（値が有限の数値）、どういう値の時falseを返す（値が有限の数値でない）のか、以下、実際のコードで確認してみましょう。
window.onload = function () {
// 数値かどうかのチェック方法
// isFiniteによる方法
console.log('isFinite("abc") = ' + isFinite("abc"));
console.log('isFinite("123abc") = ' + isFinite("123abc"));
console.log('isFinite("123") = ' + isFinite("123"));
console.log('isFinite(123) = ' + isFinite(123));
console.log('isFinite([1, 2]) = ' + isFinite([1, 2]));
console.log('isFinite({ a: 1 }) = ' + isFinite({ a: 1 }));
// 8進数 / 16進数
console.log('isFinite(0755) = ' + isFinite(0755));
console.log('isFinite(0xFF) = ' + isFinite(0xFF));
// true / false
console.log('isFinite(true) = ' + isFinite(true));
console.log('isFinite(false) = ' + isFinite(false));
// その他
console.log('isFinite(Infinity) = ' + isFinite(Infinity)); // 無限大
console.log('isFinite(undefined) = ' + isFinite(undefined));
console.log('isFinite(null) = ' + isFinite(null));
console.log('isFinite(NaN) = ' + isFinite(NaN));
}
実行結果
isFinite("abc") = false
isFinite("123abc") = false
isFinite("123") = true
isFinite(123) = true
isFinite([1, 2]) = false
isFinite({ a: 1 }) = false
isFinite(0755) = true
isFinite(0xFF) = true
isFinite(true) = true
isFinite(false) = true
isFinite(Infinity) = false
isFinite(undefined) = false
isFinite(null) = true
isFinite(NaN) = false
以上のように、明らかに数値でない文字列と、undefined、配列とオブジェクト、それに無限大Infinityと非数値NaNの場合にisFinite()はfalseを返し、有限の数値でないと判断しています。
ただし、nullの場合はisFinite()はtrueを返し、有限の数値であると判断しています。これは、nullは数字上0と扱われるためです。
数値と解釈できる文字列、8進数の数値リテラル(0から始まる数値）と、16進数の数値リテラル（0xで始まる数値）の場合、Boolean型の値の場合、isFinite()はtrueを返し、有限の数値であると判断しています。
数値変換後のチェックについて
これまでご紹介したチェック方法は、数値を変換したあとに正しく処理が行われたかどうかを確認するときによく使われます。
そこで、簡単なサンプル例をもとに変換後のチェック例を解説しておきます！
例えば、「300px」という値をそのまま数値変換した場合を見てみましょう。
var str = '300px';
var result = Number( str ); //数値に変換する
//正しく変換されたかチェックする
if( isNaN(result) ) {
console.log('数値ではありません');
}
else {
console.log('数値です')
}
実行結果
数値ではありません
この例では、数値変換するためにNumberオブジェクトの引数として「300px」という文字列を代入しています。
しかしながら、「px」という文字列が含まれているので変換後の値は「NaN」の扱いになります。そこで、IF文を使い条件式として「isNaN()」をもとに「true / false」を返すようにしているわけです。
このように記述すれば、数値として変換されなかった場合には事前に何らかのアクションを起こすことが可能なので、不明なバグに時間を費やすこともなくなるでしょう。
ちなみに、さらなる数値変換のサンプル事例や小数点・カンマ区切りなどによる変換例を、次の記事で詳しく解説しているのでぜひ参考にしてみてください！
正規表現による方法
正規表現に数値を表す文字列がマッチするかどうかで、数値のチェックを行ってみましょう。
指定した正規表現に含まれる値をチェックするためには、searchメソッドを使用します。
数値を表す正規表現は、/^[0-9]+$/ で、これは、「0～9の数字が行頭から行末まで並んでいる」文字列とマッチします。
このように今節で使用する正規表現は簡潔なもので、まずは正規表現での数値チェックの流れを確認するためのものです。
より詳細な、カンマつき、小数点つきの数字などのチェックは次章で解説します。
window.onload = function () {
// 正規表現による方法
var n01 = "123";
var n02 = "123abc"
console.log('n01.search(/^[0-9]+$/) = ' + n01.search(/^[-]?[0-9]+$/));
console.log('n02.search(/^[0-9]+$/) = ' + n02.search(/^[-]?[0-9]+$/));
}
実行結果
n01.search(/^[0-9]+$/) = 0 n02.search(/^[0-9]+$/) = -1
以上のように、明らかに数字である変数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桁） |
| (+|-)? | +符号、-符号 |
それでは、実際にコードで確認してみましょう。
window.onload = function () {
// 小数点、カンマなどを考慮した数値のチェック方法
var n01 = "123,456.78";
var n02 = "012,456.78";
var n03 = "+123,456.78";
var n04 = "-123,456.78";
var n05 = "123,456.78abc";
var n06 = "0123,456.78";
// 上記項目を考慮した正規表現の生成
var regex = new RegExp('^(+|-)?(0[1-9]{0,2}|d{0,3})(,d{3})*(.[0-9]+)?$', 'g');
console.log('n01.search(regex) = ' + n01.search(regex));
console.log('n02.search(regex) = ' + n02.search(regex));
console.log('n03.search(regex) = ' + n03.search(regex));
console.log('n04.search(regex) = ' + n04.search(regex));
console.log('n05.search(regex) = ' + n05.search(regex));
console.log('n06.search(regex) = ' + n06.search(regex));
}
実行結果
n01.search(regex) = 0 n02.search(regex) = 0 n03.search(regex) = 0 n04.search(regex) = 0 n05.search(regex) = -1 n06.search(regex) = -1
小数点、カンマ、0埋め、+符号、-符号が正しくついている数字を表す文字列は、正規表現検索のsearch()メソッドの返値が0（正規表現が文字列の0文字目からと一致）となっています。
また、明らかに数字でない変数n05と、0埋めの数字が4桁になっていてカンマの位置が違ってしまっている変数n06は正規表現検索のsearch()メソッドの返値が-1（一致なし）となっています。
小数点・カンマ変換後のチェック
小数点・カンマ区切りの数値に関して、正規表現でチェックする方法を学習しましたが、実践的な例として数値変換したあとにチェックする方法も身につけておきましょう！
まず最初に、先ほど学習した正規表現でのチェックを関数化していつでも使えるようにしておきます。
function check(target) {
var regex = new RegExp('^(+|-)?(0[1-9]{0,2}|d{0,3})(,d{3})*(.[0-9]+)?$', 'g');
if( target.search( regex ) ) {
return true;
}
else {
return false;
}
}
「check()」関数を新しく作成し、中身は先ほど学習した正規表現をそのまま代入しているだけです。
ただし、「search()」メソッドを使った返り値は使いやすいように「true / false」で返すようにIF文で条件分岐させています。
次に、この関数を活用して小数点をカンマ区切りに変換した値が、正しく処理されたかをチェックしてみましょう！
var num = 1234567.890;
//グローバルフラグ「g」を付け忘れた正規表現を設定
var result = String(num).replace(/(d)(?=(d{3})+(?!d))/, "$1,");
if( check(result) ) {
console.log('処理が正しくありません');
}
else {
console.log('正しく処理されました');
}
実行結果
処理が正しくありません
この例では、「1234567.890」という小数点に正規表現を使ってカンマ区切りを挿入しているのですが、グローバルフラグを付け忘れています。
そのため、最初にマッチした箇所だけカンマ区切りが挿入されているので「1,234567.89」となり、正しく処理が行われていません。
この時に、先ほど作成した「check()」関数を使って条件分岐させてみると、正しく処理がされていないのが実行結果を見ても分かりますね。
数値の範囲チェック方法
JavaScriptで数値の範囲チェックを行うには、自分で実装する必要があります。
まずは、値が有限の範囲であるかをチェックするコードを見てみましょう。
なお、無限大、無限小のリテラルについては、下記URLの「3 数値型でさまざまな値を取得する方法」の章を参考にしてください。
コードは、if文内の条件式で、変数nが最大値と最小値の範囲に入ってるかどうかを比較演算子 <、> でチェックしています。
window.onload = function () {
// 数値の範囲チェック方法
// 参考サイト（最大値、最小値など）
// https://www.sejuku.net/blog/23408
var n = 100;
if (n > Number.NEGATIVE_INFINITY && n < Number.POSITIVE_INFINITY) {
console.log('n is valid.');
} else {
console.log('n is invalid.');
}
}
実行結果
n is valid.
以上のように、変数nは有限の数字です。
また、任意の最大値、最小値の範囲内であるかどうかをチェックするコードも見てみましょう。
コードは、if文内の条件式で、変数nが最大値と最小値の範囲に入ってるかどうかを比較演算子 <=、>= でチェックしています。
window.onload = function () {
// 数値の範囲チェック方法
var n = 100;
var valid_min = 110;
var valid_max = 120;
if (n >= valid_min && n <= valid_max) {
console.log('n is in valid number range.')
} else {
console.log('n is not in valid number range.')
}
}
実行結果
n is not in valid number range.
以上のように、変数n（==100）は、範囲110～120の間にはありませんでした。
小数点・カンマを扱う方法
数値の桁数チェック方法
最後に、数値の桁数をチェックする方法について学習をしていきましょう！
まず最初に、JavaScriptでは桁数をチェックするメソッドが用意されていないので、自分で実装する必要がある点に注意しましょう。
そこで、簡単なサンプル例として数値の桁数をチェックする関数を次のように自作してみます！
function checkLength(num) {
var target = Math.abs(num); //絶対値を取得
return target.toString().length;
}
console.log( checkLength(23425) );
実行結果
5
この例では、与えられた数値を文字列に変換したうえで文字数を数えるという処理を行っています。
このようにすることで数値の桁数が数えられるわけですが、マイナス値の場合に「 – 」も含めて数えてしまうため、Math.abs()を使って絶対値を取得するのを忘れないようにしましょう。
他にも、数値における桁区切りや桁数の数え方の事例について、次の記事で詳しくコード例とともに解説していますのでぜひ参考にしてみてください！
小数点以下の桁数チェック方法
次に、小数点以下の桁数をチェックする方法も考えてみましょう！
ポイントは、小数点である「. (ドット)」を活用して数値を2つに分割するという点です。
例えば、「123.45」という小数点があった場合に、「123」と「45」の2つに分割すれば「45」が2桁の数値であることは先ほどの例からも明らかですよね。
そこで、次のようなチェック関数を自作してみましょう！
function check(num, target) {
var array = num.toString().split('.'); //数値を2つに分割する
var result = 0;
//小数点以下の桁数をチェックする
if (array[1].length === target) {
return true;
}
else {
return false;
}
};
console.log( check(-123.4365, 4) );
実行結果
true
この例では、数値を文字列に変換したあとに「split()」を使って「. (ドット)」の前後で2つに分割しています。
このようにすることで配列化されるわけですが、1番目の要素に小数点以下の数値が格納されているので、lengthを使って文字数を数えれば良いわけです。
今回自作した「check()」関数は、第1引数にチェックしたい小数点を当てはめて、第2引数に桁数を指定しています。
例えば、「check(123.456, 3)」であれば、「123.456」が小数点以下3桁であるかどうかをチェックするという意味になるわけです。
数値変換後の桁数チェック方法
最後に、小数点以下の桁数変換を行った際に、先ほど自作した関数を使ってチェックする方法をご紹介しておきます。
JavaScriptでは小数点以下の桁数変換に「toFixed()」を使うのが一般的です。
次のサンプル例を見てください！
var num = 12.3456; var result = num.toFixed(2); console.log( result );
実行結果
12.35
この例では、「toFixed(2)」とすることで小数点以下の桁数を2桁に指定できているのが実行結果からも確認できますね。
そこで、先ほど自作した関数を使って正しく処理がされているのかをチェックしてみましょう！
var num = 12.3456; var digit = 2; //桁数 var result = num.toFixed( digit ); console.log( check(result, digit) );
実行結果
true
この例では、指定の桁数を「digit」に代入し、toFixed()関数で小数点以下の桁数変換を行っています。
その後に、check()関数を使い目的の桁数に正しく変換されたことをチェックしているのが実行結果からも確認できますね。
数値や小数点の桁数変換は一般的なプログラムにもよく出てくるので、このようなチェック方法をぜひ参考にしてみてください！
まとめ
いかがでしたでしょうか。
簡単に変数値が数値であるかどうかを確認するのは、isNaN()やisFinite()を使う方が便利でした。
また、文字列が数値であるかどうかを確認するのは、正規表現を用いることが適切でした。
文字列を正規表現でマッチさせる処理はよく使われるコードなので、ぜひ、ここで使い方を覚えておいてください。
また、数値の範囲チェックや桁数チェックをするためには、自分でコードを実装する必要がありました。不便と感じるかもしれませんが、自分で実装する分自由に応用が利きますので、ぜひ、覚えておいてください。
JavaScriptの数値のチェックについて忘れてしまったら、またこのページをご覧になってください！
