【中級者向け】JavaScriptで小数点数を精緻に検証：IsNumeric() 関数の限界を超える

2024-04-04

JavaScriptで小数点数を検証 - IsNumeric()

JavaScriptで入力された値が小数点数かどうかを検証する方法はいくつかありますが、ここでは IsNumeric() 関数を使った方法を紹介します。

IsNumeric() 関数は、引数として渡された値が数値かどうかを判定し、数値であれば true、そうでなければ false を返します。

例

function IsNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

// 例
const num1 = 123.45;
const num2 = "abc";

console.log(IsNumeric(num1)); // true
console.log(IsNumeric(num2)); // false

詳細解説

isNaN() 関数

isNaN() 関数は、引数として渡された値が NaN (Not a Number) かどうかを判定します。NaN は、数値に変換できない値を表します。

parseFloat() 関数

parseFloat() 関数は、引数として渡された文字列を数値に変換します。変換に成功した場合、数値を返します。変換に失敗した場合、NaN を返します。

isFinite() 関数

isFinite() 関数は、引数として渡された値が有限の数値かどうかを判定します。有限の数値とは、無限大や無限小ではない数値です。

IsNumeric() 関数の注意点

空白文字やカンマなどの記号を含む文字列は、IsNumeric() 関数によって数値と判定される場合があります。

正規表現

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>IsNumeric() サンプル</title>
</head>
<body>
  <input type="text" id="num">
  <button onclick="validate()">検証</button>

  <script>
  function validate() {
    const num = document.getElementById("num").value;

    if (IsNumeric(num)) {
      alert("入力された値は小数点です。");
    } else {
      alert("入力された値は小数点ではありません。");
    }
  }
  </script>
</body>
</html>

動作

上記のコードを HTML ファイルとして保存します。
ブラウザでファイルを開きます。
テキストボックスに数値を入力します。
"検証" ボタンをクリックします。

結果

入力された値が小数点数であれば、"入力された値は小数点です。" というアラートが表示されます。そうでなければ、"入力された値は小数点ではありません。" というアラートが表示されます。

改良

空白文字やカンマなどの記号を含む文字列も検証できるように、正規表現を追加します。
科学表記も検証できるように、Number.isFinite() 関数を使用します。

小数点数検証のその他の方法

// 例
const num1 = 123.45;
const num2 = Infinity;

console.log(Number.isFinite(num1)); // true
console.log(Number.isFinite(num2)); // false

正規表現を使って、小数点数を表す文字列のパターンをマッチさせることができます。

// 例
const num1 = "123.45";
const num2 = "abc";

const regex = /^-?\d+(?:\.\d+)?$/;

console.log(regex.test(num1)); // true
console.log(regex.test(num2)); // false

// 例
const num1 = "123.45";
const num2 = "abc";

const num1Parsed = parseFloat(num1);
const num2Parsed = parseFloat(num2);

console.log(isNaN(num1Parsed)); // false
console.log(isNaN(num2Parsed)); // true