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


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

让我们通过一些例子来了解每种方法。

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

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

因此,我们可以将该正则表达式作为 JavaScript 内置 match 方法的参数,以搜索给定字符串中的所有数字。

语法

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

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 - 使用reduce() 方法和charArray 将整个数组简化为仅包含数字的单个字符串。

  • 步骤 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() 方法。重要的是要仔细考虑哪种方法最适合特定情况。

更新于:2023年9月14日

34K+ 次查看

启动您的职业生涯

通过完成课程获得认证

开始学习
广告
© . All rights reserved.