引言：
在web开发过程中，我们经常需要从字符串中提取数字，例如获取表单中的输入内容、解析网页中的数值等。在此，我们将介绍通过JavaScript从字符串中提取数字的方法。
使用正则表达式方式:
RegExp对象
在JavaScript中，正则表达式主要通过RegExp对象实现。RegExp是一个内置对象，它提供了在文本中执行模式匹配的能力。
创建一个RegExp对象，可以使用以下两种方式：
字面量表示法：直接使用斜杠（/）将正则表达式写在两个斜杠之间。例如：/pattern/，其中pattern是要匹配的模式。
构造函数表示法：使用RegExp构造函数创建一个新的RegExp对象。例如：new RegExp(pattern)。
RegExp.test()方法
RegExp.test(string)方法可以检测一个字符串中是否包含匹配某个模式的子字符串，如果存在返回true，否则返回false。
const str = "The temperature is 20 degrees Celsius.";
const pattern = /\d+/;
const result = pattern.test(str);
console.log(result); // Output: true
在以上示例代码中，我们创建了一个包含数字的字符串。然后我们创建了一个包含正则表达式的pattern变量，该正则表达式用于匹配任意一个或多个数字。最后，我们使用pattern.test()方法测试字符串是否包含数字，结果返回为true，表明字符串中包含数字。
RegExp.exec()方法
RegExp.exec(string)方法用于在一个字符串中查找匹配某个模式的字符串，并返回一个包含匹配结果的数组。其中，数组的第一项是匹配的完整字符串，后面的每一项是正则表达式中匹配的分组结果。
const str = "The temperature is 20 degrees Celsius.";
const pattern = /\d+/;
const result = pattern.exec(str);
console.log(result); // Output: ["20"]
在以上示例代码中，我们创建了一个包含数字的字符串。然后我们创建了一个包含正则表达式的pattern变量，该正则表达式用于匹配任意一个或多个数字。最后，我们使用pattern.exec()方法从字符串中查找数字并返回一个数组。
RegExp.match()方法
RegExp.match(string)方法用于返回一个包含所有匹配结果的数组。其中，数组的第一项是匹配的完整字符串，后面的每一项是正则表达式中匹配的分组结果。
const str = "The temperature is 20 degrees Celsius.";
const pattern = /\d+/;
const result = str.match(pattern);
console.log(result); // Output: ["20"]
在以上示例代码中，我们创建了一个包含数字的字符串。然后我们创建了一个包含正则表达式的pattern变量，该正则表达式用于匹配任意一个或多个数字。最后，我们使用match()方法从字符串中查找数字并返回一个数组。
字符串替换方法
使用字符串替换方法可以将字符串中匹配某个模式的子字符串替换为指定的文本。
使用replace() 方法可以替换字符串中匹配到的子字符串。该方法有两个参数，第一个参数为要查找的字符串；第二个参数为要替换的字符串。其中，第一个参数可以是一个正则表达式。
const str = "The temperature is 20 degrees Celsius.";
const pattern = /\d+/;
const result = str.replace(pattern, "60");
console.log(result); // Output: "The temperature is 60 degrees Celsius."
在以上示例代码中，我们创建了一个包含数字的字符串。然后我们创建了一个包含正则表达式的pattern变量，该正则表达式用于匹配任意一个或多个数字。最后，我们使用replace() 方法将字符串中匹配到的数字20替换为数字60。
使用parseInt()方法
parseInt()函数可以将一个字符串中的数字提取出来并返回一个整数。如果字符串中不包含数字，则返回NaN。
const str = "The temperature is 20 degrees Celsius.";
const result = parseInt(str);
console.log(result); // Output: NaN
在以上示例代码中，我们创建了一个包含数字的字符串。然后我们使用parseInt()函数从字符串中提取数字，结果返回NaN，因为字符串中包含其他非数字字符。
如果要提取字符串中的数字，可以在调用parseInt()函数时指定一个默认基数，例如:
const str = "The temperature is 20 degrees Celsius.";
const result = parseInt(str, 10);
console.log(result); // Output: 20
在以上示例代码中，我们创建了一个包含数字的字符串。然后我们使用parseInt()函数从字符串中提取数字并指定默认基数为10，即10进制。最后，我们成功提取出字符串中的数字20。
使用parseFloat()方法
parseFloat()函数可以将一个字符串中的数字提取出来并返回一个浮点数。如果字符串中不包含数字，则返回NaN。
const str = "The temperature is 20.5 degrees Celsius.";
const result = parseFloat(str);
console.log(result); // Output: 20.5
在以上示例代码中，我们创建了一个包含浮点数的字符串。然后我们使用parseFloat()函数从字符串中提取数字，结果返回浮点数20.5。
结语：
以上介绍了使用JavaScript从字符串中提取数字的多种方法，例如使用正则表达式，使用parseInt()函数和使用parseFloat()函数等。这些方法各有优劣，可以根据实际需要选择合适的方式来提取数字。希望这篇文章能对开发者们有所帮助。