用JavaScript从字符串中提取一个数字

在JavaScript中，有多种方法可以从一个字符串中提取数字。一种方法是使用match()方法和一个正则表达式来搜索字符串中的所有数字。另一种方法是使用replace()方法和正则表达式来删除字符串中的所有非数字字符，只留下数字。

让我们借助一些例子来了解每一种方法。

使用match()方法和正则表达式

正则表达式是一种搜索模式，我们可以通过组合多个字母和特殊字符来创建。我们可以使用’/\d+/’搜索模式搜索字符串中的数字。在’\d+’搜索模式中，d代表0和9之间的数字，而’+’代表找到至少一个数字。

因此，我们可以使用该正则表达式作为JavaScript内置匹配方法的参数，来搜索给定字符串中的所有数字。

语法

用户可以按照下面的语法，从给定的字符串中提取所有的数字。

let str = "Sampll323435 Stringrfd23232ftesd3454!";
let numbers = str.match('/\d+/');

在上面的语法中，我们使用了match()方法，该方法匹配给定字符串中出现的数字。

示例

在这个例子中，我们已经创建了包含数字的字符串。之后，我们创建了带有g标志的正则表达式，以匹配字符串中所有出现的数字，并将其作为match()方法的参数，在字符串中进行匹配

match()方法根据正则表达式匹配，返回包含所有数字的数组。

<html>
   <body>
      <h3>Using the <i> match () </i> Method and Regular Expression to extract the numbers from the string</h3>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById("output");

         // defining the string containing the numbers
         let str = "Sampll323435 Stringrfd23232ftesd3454!";
         output.innerHTML = "Original String: " + str + "<br/>";

         // Matching for the numbers using the match() method.
         let numbers = str.match(/\d+/g);

         // numbers is an array of all occurrences of numbers

         // if any single number is available in the string, then print numbers
         if (numbers.length > 0) {
            output.innerHTML += "<br> Numbers in the StringL: " + numbers + "<br/>";
         }
      </script>
   </body>
</html>

使用replace()方法和正则表达式

我们可以使用正则表达式来识别数字字符和其他字符。因此，我们将使用正则表达式来识别其他字符，并将其替换为空字符串。通过这种方式，我们可以删除除数字以外的所有字符，并从字符串中提取数字。

语法

用户可以按照下面的语法，使用replace()方法从字符串中提取数字。

let result = str.replace(/[^0-9]/g,"");

在上述语法中，str是一个参考字符串，我们想从中提取一个数字。另外，正则表达式[^0-9]代表所有不在0和9之间的字符。

示例

在下面的例子中，我们使用replace()方法将所有字符替换为空字符串，数字字符除外。我们把正则表达式作为第一个参数，把空字符串作为第二个参数。

replace()方法在用空字符串替换除数字字符外的所有字符后返回字符串。在输出中，我们可以观察到，它没有像match()方法那样返回数组，而是只返回了一个字符串。

<html>
   <body>
      <h3>Using the <i> replace() </i> method and regular expression to extract the numbers from the string</h3>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById("output");
         let string = "dnbdj53454 4k54k6j23in k09e30n9923g9 kjm545";
         output.innerHTML = "Original String: " + string + "<br/>";

         // replace all non-numeric characters with empty string
         let result = string.replace(/[^0-9]/g, "");
         output.innerHTML +="<br> Numbers in the string: " + result + "<br/>";
      </script>
   </body>
</html>

使用reduce()方法从字符串中提取数字

reduce()是JavaScript的内置库方法。我们可以将字符串转换为字符数组，并使用字符数组的reduce()方法。reduce()方法通过对数组元素进行操作，帮助我们将数组减少到一个元素。

在这里，我们将检查该字符是否是一个数字，并将其添加到最后的元素中；否则，我们将添加一个空字符串。

语法

用户可以按照下面的语法，使用reduce()方法，从字符串中提取数字。

let charArray = [...string];
let numbers = charArray.reduce(function (numString, element) {
   let nums = "0123456789";
   if (nums.includes(element)) {
      return numString + element;
   }
   return numString;
},"");

在上面的语法中，我们使用了charArray的reduce方法。我们把回调函数作为第一个参数，把空字符串作为第二个参数。

算法

第1步 – 使用传播操作符将字符串转换为字符数组。
第2步 – 使用charArray的reduce()方法，将整个数组减少为一个只包含数字的字符串。
第3步–将回调函数作为reduce()方法的第一个参数，该方法返回缩小的字符串
第4步 – 在回调函数中，传递numString作为第一个参数，它是一个缩小的字符串，element作为第二个参数，它是一个数组元素，意味着字符串的字符。
第5步 – 在回调函数中，检查数组的字符是否意味着该元素在0到9之间。如果是，在numString中添加该字符并返回；否则，按原样返回numString。
第6步 – 作为reduce()方法的第二个参数，传递一个空字符串，这是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()方法。仔细考虑哪种方法最适合于特定的情况是很重要的。