JS 提取字符串中的数字|极客笔记

JS 提取字符串中的数字

在前端开发中，我们经常会遇到需要从字符串中提取数字的情况，例如从用户输入的表单中获取数字，或者从接口返回的数据中解析出数字等。本文将介绍在 JavaScript 中如何提取字符串中的数字，涵盖常见的提取方法和示例代码。

使用正则表达式提取数字

正则表达式是一种强大的匹配模式的工具，可以用来在字符串中查找和提取特定的文本。在 JavaScript 中，我们可以使用正则表达式来提取字符串中的数字。

提取所有数字

如果我们想要提取字符串中的所有数字，可以使用正则表达式 /[0-9]+/g。这个正则表达式表示匹配一个或多个数字。

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

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

在上面的示例中，我们定义了一个字符串 str 包含了数字 “123” 和 “456”，然后使用 match 方法和正则表达式 [0-9]+ 提取出了所有的数字。最后输出的 numbers 数组中包含了所有提取出的数字。

提取第一个数字

如果我们只需要提取字符串中的第一个数字，可以使用正则表达式 /\d+/。这个正则表达式表示匹配一个或多个数字。

const str = "abc123def456ghi";
const number = str.match(/\d+/);

console.log(number[0]);
// Output: "123"

在上面的示例中，我们使用正则表达式 /\d+/ 匹配了字符串中的第一个数字，然后通过访问 number 数组的第一个元素来获取提取出的数字。

提取数字和小数点

如果字符串中包含小数点（如 “3.14”）并且希望提取小数，可以使用正则表达式 /\d+\.\d+/。这个正则表达式表示匹配至少一个数字，一个小数点，再加上至少一个数字。

const str = "abc3.14def2.718ghi";
const decimalNumbers = str.match(/\d+\.\d+/g);

console.log(decimalNumbers);
// Output: ["3.14", "2.718"]

在上面的示例中，我们使用正则表达式 /\d+\.\d+/ 匹配了包含小数点的数字，并通过 match 方法提取出所有符合条件的数字。

使用字符串处理函数提取数字

除了使用正则表达式，我们还可以使用 JavaScript 内置的字符串处理函数来提取数字。

使用 `split` 方法提取数字

split 方法可以将一个字符串分割为一个子字符串数组，我们可以以非数字字符为分隔符来分割字符串，然后从中提取数字。

const str = "abc123def456ghi";
const numbers = str.split(/\D+/).filter(num => num !== "");

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

在上面的示例中，我们使用 split 方法将字符串按照非数字字符来分割，然后通过过滤空字符串来获取所有的数字。最终得到的 numbers 数组中包含了所有提取出的数字。

使用 `replace` 方法提取数字

replace 方法可以将匹配的子字符串替换为新的子字符串，我们可以使用正则表达式将非数字字符替换为空字符串来提取数字。

const str = "abc123def456ghi";
const numbers = str.replace(/\D+/g, " ").trim().split(" ");

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

在上面的示例中，我们先使用 replace 方法将非数字字符替换为空格，然后通过 trim 方法去除首尾空格，最后使用 split 方法按照空格分割字符串获取所有的数字。

总结

本文介绍了在 JavaScript 中提取字符串中的数字的方法，包括使用正则表达式和字符串处理函数。通过本文的示例代码，读者可以了解如何灵活使用不同的方法来提取字符串中的数字，从而满足不同的需求场景。

JS 提取字符串中的数字