首页 > web前端 > js教程 > 正文

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

WBOY
发布: 2023-08-26 13:09:21
转载
1741 人浏览过

使用 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;
},"");
登录后复制

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

算法

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

以上是使用 JavaScript 从字符串中提取数字的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板