如何使用JavaScript获取字符串中的数字

在JavaScript开发中，有时候我们需要从字符串中提取数字，例如从表单输入中获取有效的数字输入，或者从接口返回的数据中提取特定的数字。本文将详细介绍如何使用JavaScript获取字符串中的数字。

字符串中的数字提取方法

在JavaScript中，可以通过以下几种方法提取字符串中的数字：

使用正则表达式提取数字
使用字符串的split()方法拆分字符串
使用字符串的match()方法匹配数字

下面将分别介绍这三种方法的使用。

使用正则表达式提取数字

正则表达式是一种强大的模式匹配工具，可以用来匹配和提取字符串中的特定模式。在JavaScript中，使用正则表达式可以很方便地提取字符串中的数字。

下面是使用正则表达式提取数字的示例代码：

const str = 'Hello123JavaScript456';

const numbers = str.match(/\d+/g);

console.log(numbers); // ["123", "456"]

在上面的代码中，首先定义了一个字符串str，其中包含了一些数字。然后使用正则表达式提取字符串中的数字，通过match()方法，并将结果赋值给numbers变量。最后打印输出numbers变量，可以看到结果为包含所有数字的数组["123", "456"]。

在正则表达式中，\d表示匹配一个数字，+表示匹配一个或多个。因此，\d+表示匹配一个或多个数字的模式。

使用字符串的split()方法拆分字符串

另一种获取字符串中数字的方法是使用字符串的split()方法，该方法可以根据指定的分隔符将字符串拆分为数组。

以下是使用split()方法获取字符串中的数字示例代码：

const str = 'Hello123JavaScript456';

const numbers = str.split(/\D/).filter(Boolean);

console.log(numbers); // ["123", "456"]

在上面的代码中，首先定义了一个字符串str，其中包含了一些数字。然后使用split()方法根据非数字字符（通过正则表达式/\D/）将字符串拆分成数组。过滤掉空字符串，使用filter(Boolean)将数组中的空字符串剔除掉，最后得到包含所有数字的数组["123", "456"]。

使用字符串的match()方法匹配数字

除了使用正则表达式提取字符串中的数字，还可以使用字符串的match()方法，该方法将返回匹配指定模式的字符串数组。

以下是使用match()方法获取字符串中的数字示例代码：

const str = 'Hello123JavaScript456';

const numbers = str.match(/[0-9]+/g);

console.log(numbers); // ["123", "456"]

在上面的代码中，首先定义了一个字符串str，其中包含了一些数字。然后使用match()方法通过正则表达式/[0-9]+/g去匹配字符串中的数字。最后打印输出numbers变量，可以看到结果为包含所有数字的数组["123", "456"]。

应用场景示例

以上介绍了三种常见的方法来获取字符串中的数字，在实际应用中可以根据具体需求选择合适的方法。下面通过两个实际场景的示例来说明这些方法的应用。

示例一：从表单输入中获取有效的数字

假设我们有一个表单，其中有一个输入框用来输入年龄。我们需要通过JavaScript来获取年龄输入，并进行验证，确保输入的是一个有效的数字。

以下是实现从表单输入中获取有效数字的示例代码：

<form>
  <input type="text" id="age" placeholder="请输入年龄" />
  <button type="button" onclick="getValidAge()">提交</button>
</form>

<script>
function getValidAge() {
  const ageInput = document.getElementById('age');
  const age = ageInput.value.match(/\d+/);

  if (age) {
    console.log('输入的年龄为：', age[0]);
  } else {
    console.log('请输入有效的年龄！');
  }
}
</script>

在上面的代码中，首先定义了一个表单，其中包含一个用于输入年龄的输入框和一个提交按钮。提交按钮的onclick事件绑定了getValidAge()方法。

在getValidAge()方法内部，通过getElementById()方法获取到输入框的DOM元素，并通过value属性获取到输入框中的内容。然后通过正则表达式提取数字，如果提取到了数字，即age数组为非空，就打印输出年龄值。否则，提示用户输入有效的年龄。

示例二：从接口返回的数据中提取特定数字

假设我们从一个接口中获取到了一些数据，其中包含了用户的身高信息。我们需要从返回的数据中提取出用户的身高值，并进行一些数据处理。

以下是示例代码：

const data = {
  name: 'John',
  height: '180cm',
};

const heightString = data.height;
const height = parseInt(heightString.match(/\d+/)[0]);

console.log('用户的身高为：', height, 'cm');

在上面的代码中，首先定义了一个包含用户身高信息的对象data。然后通过点语法获取到身高字符串heightString。接着使用正则表达式提取出身高字符串中的数字，通过parseInt()方法将提取到的数字转化为整数，并将结果赋值给height变量。最后打印输出用户的身高。