JavaScriptで「isNaN関数」と「正規表現」を使いこなして文字列の有効性を検証
JavaScript で文字列が有効な数値かどうかを確認する方法
Web 開発において、ユーザー入力の値を検証することは非常に重要です。特に、数値入力を扱う場合、誤った入力がアプリケーションの動作に悪影響を及ぼす可能性があります。
そこで今回は、JavaScript で "文字列が有効な数値かどうか" を検証する方法について、分かりやすく解説します。
方法
JavaScript で文字列が有効な数値かどうかを確認するには、主に以下の 2 つの方法があります。
isNaN() 関数を使用する
isNaN() 関数は、"Is Not a Number" の略であり、引数が数値でない場合に true を返し、数値の場合は false を返します。
function isNumeric(numStr) {
return !isNaN(numStr);
}
上記のコード例では、isNumeric() 関数に文字列 numStr を引数として渡しています。
この関数は、isNaN() 関数を使用して numStr が数値でないかどうかを判断し、数値でない場合は true を返し、数値の場合は false を返します。
正規表現を使用する
正規表現は、文字列のパターンを記述するための強力なツールです。
数値かどうかを判定する正規表現は以下の通りです。
const regex = /^\d+$/;
この正規表現は、以下の条件を満たす文字列にマッチします。
- 最初と最後の文字が数字である
- 数字以外の文字を含まない
上記の正規表現を使用して、文字列が有効な数値かどうかを確認するコード例は以下の通りです。
function isNumeric(numStr) {
const regex = /^\d+$/;
return regex.test(numStr);
}
このコード例では、regex.test(numStr) メソッドを使用して、正規表現 regex が文字列 numStr にマッチするかどうかを判断しています。
マッチする場合 (true) は、numStr が有効な数値であることを意味します。
上記で紹介した 2 つの方法にはそれぞれ利点と欠点があります。
- 利点：
- 欠点：
- 浮動小数点数を厳密に区別できない
- マイナス記号 (
-) を含む数値を正しく判定できない
- 欠点：
一般的には、シンプルで分かりやすい isNaN() 関数を使用するのがおすすめです。
ただし、浮動小数点数を厳密に区別する必要がある場合や、マイナス記号を含む数値を正しく判定する必要がある場合は、正規表現を使用する必要があります。
それぞれの方法の利点と欠点を理解した上で、状況に応じて適切な方法を選択してください。
function isNumeric(numStr) {
if (numStr === '') {
return false;
}
return !isNaN(numStr);
}
const inputStr = '123';
if (isNumeric(inputStr)) {
console.log(inputStr + ' は有効な数値です。');
} else {
console.log(inputStr + ' は有効な数値ではありません。');
}
このコード例では、まず if 文を使用して、入力文字列が空かどうかをチェックしています。
空の場合は、数値ではないと判断し、false を返します。
空でない場合は、!isNaN(numStr) を使用して、numStr が数値かどうかを判断しています。
!isNaN(numStr) は、isNaN(numStr) の結果を反転します。
つまり、isNaN(numStr) が true (数値ではない) の場合は false を返し、isNaN(numStr) が false (数値である) の場合は true を返します。
function isNumeric(numStr) {
const regex = /^\d+$/;
return regex.test(numStr);
}
const inputStr = '123.45';
if (isNumeric(inputStr)) {
console.log(inputStr + ' は有効な数値です。');
} else {
console.log(inputStr + ' は有効な数値ではありません。');
}
このコード例では、まず正規表現 regex を定義しています。
補足
上記のサンプルコードは、あくまでも基本的な例です。
実際の開発では、状況に応じてコードをカスタマイズする必要があります。
例えば、以下のような機能を追加することができます。
- 小数点を含む数値かどうかを判定する
- 特定の桁数以下の数値かどうかを判定する
ご参考になりましたでしょうか？
JavaScript で文字列が有効な数値かどうかを確認するその他の方法
parseInt() 関数と isFinite() 関数を使用する
parseInt() 関数は、文字列の先頭から整数を解析し、10 進数の整数値を返します。
isFinite() 関数は、引数が有限な数値かどうかを判断し、有限な数値の場合は true を返し、そうでない場合は false を返します。
これらの関数を組み合わせて、以下のように文字列が有効な数値かどうかを確認できます。
function isNumeric(numStr) {
if (numStr === '') {
return false;
}
const parsedNum = parseInt(numStr);
return isFinite(parsedNum) && !isNaN(parsedNum);
}
変換に成功した場合 (parsedNum が NaN ではない場合)、isFinite(parsedNum) を使用して、parsedNum が有限な数値かどうかを判断します。
有限な数値の場合は (true)、!isNaN(parsedNum) を使用して、parsedNum が NaN ではないかどうかを判断します。
Number() コンストラクタは、引数を数値に変換し、変換に成功した場合は数値を表すオブジェクトを返し、失敗した場合は NaN を返します。
function isNumeric(numStr) {
if (numStr === '') {
return false;
}
return !isNaN(Number(numStr));
}
変換に成功した場合 (NaN ではない場合)、true を返します。
function isNumeric(numStr) {
if (numStr === '') {
return false;
}
return !isNaN(parseFloat(numStr));
}
このコード例は、Number() コンストラクタを使用した例とほぼ同じですが、parseFloat() 関数を使用して浮動小数点数を解析しています。
上記で紹介した方法は、それぞれ異なる特性を持っています。
状況に応じて適切な方法を選択してください。
- 浮動小数点数を厳密に区別する必要がある場合は、正規表現を使用する必要があります。
- 整数のみを判定する場合は、
parseInt()関数とisFinite()関数を使用する方法が効率的です。 - 変換後の値が必要な場合は、
Number()コンストラクタまたはparseFloat()関数を使用する方法が適しています。
javascript validation numeric
