JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで小数を検証するには？正規表現を使った実装例を解説

JavaScriptで小数を検証する方法

JavaScriptで、ユーザーが入力した値が正しい小数（小数点を含む数値）かどうかを判定したい場面はよくあります。そんなときに便利なのが正規表現です。本記事では、match()メソッドと正規表現を組み合わせて、入力値が小数かどうかを検証する方法を、具体的なコード例とともにわかりやすく解説します。

使用する正規表現パターン

今回の検証では、以下の正規表現を使用します。

/^[-+]?[0-9]+\.[0-9]+$/

このパターンの各要素の意味は次のとおりです。

  • ^[-+]?：文字列の先頭に符号（+ または -）が付いていても、付いていなくてもマッチする
  • [0-9]+：小数点の前に1桁以上の数字が必須
  • \.：小数点（ドット）が必須
  • [0-9]+$：小数点の後に1桁以上の数字が必須

サンプルコード

入力フィールドに入力された値が小数かどうかを判定し、結果を画面に表示する完全なサンプルコードは以下のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptで小数を検証する</h1>
<div style="color: green;" class="result"></div>
<input type="number" class="num" />
<button class="Btn">チェック</button>
<h3>上のボタンをクリックすると、入力された値が有効な小数かどうかを確認できます</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        var str = document.querySelector(".num").value;
        var regex = /^[-+]?[0-9]+\.[0-9]+$/;
        var match = str.match(regex);
        if (match) resEle.innerHTML = "入力された数値は小数です";
        else resEle.innerHTML = "入力された数値は小数ではありません";
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptで小数を検証するには？正規表現を使った実装例を解説

整数（小数点を含まない数値）を入力して「チェック」ボタンをクリックすると、「入力された数値は小数ではありません」という判定結果が表示されます。

JavaScriptで小数を検証するには？正規表現を使った実装例を解説

一方、小数を入力して「チェック」ボタンをクリックすると、「入力された数値は小数です」という判定結果が表示されます。

JavaScriptで小数を検証するには？正規表現を使った実装例を解説

まとめ

JavaScriptで小数を検証するには、正規表現/^[-+]?[0-9]+\.[0-9]+$/とmatch()メソッドを組み合わせるのが最もシンプルで確実な方法です。符号の有無や小数点以下の桁数など、パターンを少し変更するだけでさまざまな形式に対応できるので、フォームのバリデーションなどユーザー入力のチェックが必要な場面でぜひ活用してみてください。

  1. JavaScriptで数値の配列を個々の桁に分割する方法

    数値リテラルの配列が与えられたとき、splitDigit() のような関数を作成することを考えます。この関数は配列を受け取り、10以上の数値を個々の桁に分割した新しい数値の配列を返します。 期待される動作 // 入力: const arr = [ 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106 ]; // 出力: const output = [ 9, 4, 9, 5, 9, 6, 9, 7, 9, 8, 9, 9, 1, 0, 0, 1, 0, 1, 1, 0, 2, 1, 0, 3, 1, 0, 4, 1, 0, 5,

  2. JavaScriptで数値の小数点以下の桁数を取得する方法

    概要本記事では、整数または浮動小数点数を受け取るJavaScript関数の作成方法を解説します。引数が浮動小数点数の場合は小数点以下の桁数を返し、整数の場合は0を返します。実装の考え方最もシンプルで確実な方法は、数値を一度文字列に変換し、小数点（.）が含まれているかどうかを判定するアプローチです。具体的な手順は以下のとおりです。String()を使って数値を文字列に変換するincludes()で小数点が含まれているかを確認する含まれていればsplit(.)で分割し、小数点以下の文字数を返す含まれていなければ0を返すコード例const num1 = 1.123456789;const num2