使用 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");
// 定义包含数字的字符串
let str = "Sampll323435 Stringrfd23232ftesd3454!";
output.innerHTML = "Original String: " + str + "<br/>";
// 使用 match() 方法匹配数字。
let numbers = str.match(/\d+/g);
// 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() 方法。仔细考虑哪种方法最适合特定情况非常重要。
