ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptを使用して文字列から数値を抽出する

JavaScriptを使用して文字列から数値を抽出する

WBOY
WBOY転載
2023-08-26 13:09:211719ブラウズ

使用 JavaScript 从字符串中提取数字

JavaScript では、文字列から数値を抽出する方法がいくつかあります。 1 つの方法は、match() メソッドを正規表現とともに使用して、文字列内のすべての数値を検索することです。もう 1 つの方法は、replace() メソッドと正規表現を使用して、文字列から数字以外の文字をすべて削除し、数字だけを残すことです。

いくつかの例を参考にして、それぞれの方法を理解しましょう。

match() メソッドと正規表現を使用する

正規表現は、複数の文字と特殊文字を組み合わせて作成できる検索パターンです。 「/\d /」検索パターンを使用して、文字列内の数値を検索できます。 「\d」検索パターンでは、d は 0 ~ 9 の数値を表し、「 」は見つかった少なくとも 1 つの数字を表します。

したがって、この正規表現を JavaScript の組み込み match メソッドの引数として使用して、指定された文字列内のすべての数値を検索できます。

###文法###

ユーザーは、次の構文に従って、指定された文字列からすべての数値を抽出できます。

リーリー

上記の構文では、指定された文字列に出現する数値と一致する match() メソッドを使用しました。

###例###

この例では、数値を含む文字列を作成します。その後、文字列内のすべての数値に一致する g フラグを使用した正規表現を作成し、それを match() メソッドの引数として渡して文字列内で一致させました。

match() メソッドは、正規表現の一致に基づいて、すべての数値を含む配列を返します。

リーリー

replace() メソッドと正規表現を使用する

正規表現を使用して、数字やその他の文字を識別できます。したがって、正規表現を使用して他の文字を識別し、空の文字列に置き換えます。このようにして、数字を除くすべての文字を削除し、文字列から数字を抽出できます。

###文法###

ユーザーは、replace() メソッドを使用して、次の構文に従って文字列から数値を抽出できます。

リーリー

上記の構文では、 str は数値を抽出する引用符で囲まれた文字列です。さらに、正規表現 [^0-9] は、0 ~ 9 を除くすべての文字を表します。

###例###

次の例では、replace() メソッドを使用して、数字を除くすべての文字を空の文字列に置き換えます。最初のパラメータとして正規表現を渡し、2 番目のパラメータとして空の文字列を渡します。

replace() メソッドは、数字を除くすべての文字を空の文字列に置き換えた後の文字列を返します。出力では、match() メソッドのように配列を返さず、単一の文字列のみを返すことがわかります。

リーリー

reduce() メソッドを使用して文字列から数値を抽出します

reduce() は JavaScript の組み込みライブラリ メソッドです。文字列を文字配列に変換し、文字配列に対してreduce()メソッドを使用できます。 reduce() メソッドは、配列要素に対して操作を実行することにより、配列を 1 つの要素に減らすのに役立ちます。

ここでは、文字が数字であるかどうかを確認し、それを最後の要素に追加します。そうでない場合は、空の文字列を追加します。

###文法###

ユーザーは、reduce() メソッドを使用して、次の構文に従って文字列から数値を抽出できます。

リーリー

上記の構文では、charArray でreduce メソッドを使用しています。最初のパラメータとしてコールバック関数を渡し、2 番目のパラメータとして空の文字列を渡します。

###アルゴリズム###

ステップ 1

- スプレッド演算子を使用して文字列を文字配列に変換します。

ステップ 2

- charArray のreduce() メソッドを使用して、配列全体を数値のみを含む単一の文字列に縮小します。

  • ステップ 3 - コールバック関数を、reduce() メソッドの最初のパラメータとして渡します。これは、縮小された文字列を返します。

  • ステップ 4
  • - コールバック関数で、最初のパラメータとして numString (簡略化された文字列) を渡し、2 番目のパラメータとして element (配列要素) として文字列を渡します。文字列を表します。

  • ステップ 5
  • - コールバック関数で、配列の文字が要素が 0 ~ 9 の間にあることを示しているかどうかを確認します。存在する場合は、文字が numString に追加されて返され、そうでない場合は、numString が変更されずに返されます。

  • ステップ 6
  • -reduce() メソッドの 2 番目のパラメーターとして空の文字列を渡します。これは、numString の初期値です。

  • ステップ 7
  • - 配列の反復が完了すると、reduce() メソッドは numString の最終値を返します。

    ###例###

    以下の例では、数値を含む文字列を取得し、その文字列から数値を抽出するために上記のアルゴリズムを実装しました。
  • <html>
       <body>
          <h3>Using the <i>reduce() </i>method to extract the numbers from the string</h3>
          <div id = "output"> </div>
          <script>
             let output = document.getElementById("output");
             let string = "34gr345fr45";
             output.innerHTML += "Original String: " + string + "<br/>";
             let charArray = [...string];
             let numbers = charArray.reduce(function (numString, element) {
                let nums = "0123456789";
                if (nums.includes(element)) {
                   return numString + element;
                }
                return numString;
             }, "");
             output.innerHTML +="<br> Number in the String: " + numbers + "<br/>";
          </script>
       </body>
    </html>
    

    在本教程中,我们讨论了从给定字符串中提取数字的三种方法。第一种方法是使用 match() 方法和正则表达式来搜索字符串中的所有数字。第二种方法使用 replace() 方法和正则表达式从字符串中删除所有非数字字符,只留下数字。第三种方法是使用reduce()includes()方法。仔细考虑哪种方法最适合特定情况非常重要。

以上がJavaScriptを使用して文字列から数値を抽出するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。