使用 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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何实现视差滚动和元素动画效果，像资生堂官网那样？
或者：
怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？
Apr 04, 2025 pm 05:36 PM
实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...
JavaScript的演变：当前的趋势和未来前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。
如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...
JavaScript引擎：比较实施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
前端开发中如何实现类似 VSCode 的面板拖拽调整功能？
Apr 04, 2025 pm 02:06 PM
探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中，如何实现类似于VSCode...
