在 JavaScript 中将字符串数组转换为数字数组

将字符串数组转换为数字数组：

使用该Array.map()方法遍历数组。
使用该parseInt()方法将每个字符串转换为数字。
该map()方法将返回一个仅包含数字的新数组。

索引.js


const arrOfStr = ['1', '2', '3'];

const arrOfNum = arrOfStr.map(str => {
  return parseInt(str, 10);
});

// 👇️ [1, 2, 3]
console.log(arrOfNum);

我们传递给Array.map()方法的函数

会针对数组中的每个元素（字符串）进行调用。

在每次迭代中，我们将字符串转换为数字并返回结果。

parseInt函数解析字符串参数并返回指定基数的整数。

索引.js


console.log(parseInt('123', 10)); // 👉️ 123
console.log(parseInt('1234', 10)); // 👉️ 1234
console.log(parseInt('1234abc', 10)); // 👉️ 1234
console.log(parseInt('123xyz', 10)); // 👉️ 123

该Array.map()方法返回一个新数组，其中包含回调函数返回的值。

该Array.map方法不改变原始数组的内容，它返回一个新数组。

您还可以使用Number()构造函数和一元加号 (+) 运算符将字符串转换为数字。

索引.js


const arrOfStr = ['1', '2', '3'];

const arrOfNum = arrOfStr.map(str => {
  return Number(str);
});

// 👇️ [1, 2, 3]
console.log(arrOfNum);

构造函数根据提供的值Number()创建一个对象。Number

一元加号 (+) 运算符是一种将字符串转换为数字的更隐式方式。

索引.js


const arrOfStr = ['1', '2', '3'];

const arrOfNum = arrOfStr.map(str => {
  return +str;
});

// 👇️ [1, 2, 3]
console.log(arrOfNum);

一
元加号 (+)
运算符尝试将值转换为数字（如果不是）。

另一种方法是使用
Array.forEach方法。

使用以下方法将字符串数组转换为数字数组`Array.forEach()`

这是一个三步过程：

声明一个新变量并将其初始化为一个空数组。
使用该Array.forEach()方法迭代字符串数组。
将每个字符串转换为数字并将数字推入新数组。

索引.js


const arrOfStr = ['1', '2', '3'];

const arrOfNum = [];

arrOfStr.forEach(str => {
  arrOfNum.push(parseInt(str));
});

// 👇️ [1, 2, 3]
console.log(arrOfNum);

我们使用Array.forEach方法迭代字符串数组。

我们传递给方法的函数被调用数组中的每个元素（字符串）。

在每次迭代中，我们将当前数组元素转换为一个数字并将该数字推入新数组。

如果您必须经常这样做，请定义一个可重用的函数。

索引.js


function toNumbersArray(arr) {
  const arrOfNum = [];

  arr.forEach(str => {
    arrOfNum.push(parseInt(str));
  });

  return arrOfNum;
}

console.log(toNumbersArray(['1', '2', '3'])); // 👉️ [1, 2, 3]
console.log(toNumbersArray(['1', '2'])); // 👉️ [1, 2]

该函数将一个数组作为参数并返回一个新数组，其中原始数组的所有元素都转换为数字。

您还可以使用for...of循环将字符串数组转换为数字数组。

使用以下方法将字符串数组转换为数字数组`for...of`

这是一个三步过程：

声明一个新变量并将其初始化为一个空数组。
使用for...of循环遍历字符串数组。
将每个字符串转换为数字并将数字推入新数组。

索引.js


const arrOfStr = ['1', '2', '3'];

const arrOfNum = [];

for (const element of arrOfStr) {
  arrOfNum.push(parseInt(element));
}

console.log(arrOfNum); // 👉️ [1, 2, 3]

for …of语句用于循环遍历可迭代对象，如数组、字符串Map、Set和
NodeList对象generators。

在每次迭代中，我们使用该parseInt()方法将当前元素转换为数字并将结果推送到新数组。

您选择哪种方法是个人喜好的问题。我会使用该
Array.map()方法，因为我发现它非常直接且易于阅读。

在 JavaScript 中将字符串转换为数字数组

将字符串转换为数字数组：

使用该split()方法将字符串拆分为数组。
使用该map()方法遍历数组。
将每个字符串转换为数字。

索引.js


const str = '5,15,45';

// 👇️ ['5', '15', '45']
const arrOfStr = str.split(',');

const arrOfNum = arrOfStr.map(element => {
  return Number(element);
});

console.log(arrOfNum); // 👉️ [5, 15, 45]

我们传递给String.split()方法的唯一参数

是一个分隔符。

在此示例中，数字在字符串中由逗号分隔，但是，它们可以由空格或任何其他字符分隔。

索引.js


const str = '5 15 45';

// 👇️ ['5', '15', '45']
console.log(str.split(' '));

如果您的数字由另一个字符分隔，请将字符作为参数传递给该split()方法。

索引.js


const str = '5-15-45';

// 👇️ ['5', '15', '45']
console.log(str.split('-'));

最后一步是

对字符串数组调用Array.map()方法。

我们传递给方法的函数map被调用数组中的每个元素（字符串）。

在每次迭代中，我们将字符串转换为数字并返回结果。

该map()方法返回一个新数组，该数组仅包含函数返回的值——在我们的例子中是所有数字。

如果您的字符串包含以字符结尾的数字，例如15a，您必须使用该parseInt()函数。

索引.js


const str = '5a,15b,45c';

// 👇️ ['5a', '15b', '45c']
const arrOfStr = str.split(',');

const arrOfNum = arrOfStr.map(element => {
  return parseInt(element, 10);
});

console.log(arrOfNum); // 👉️ [5, 15, 45]

我们的数字以字符结尾，所以我们不能将它们直接传递给Number
对象。

相反，我们使用
parseInt函数来
提取数字。

我们将以下参数传递给该parseInt()函数：

我们要解析为数字的字符串
基数。默认基数不是10，所以我们必须明确指定它

请注意，此方法仅在数字位于字符之前时才有效。如果你有一个像a15,b30.

# 额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：

在 JavaScript 中将字符串数组转换为数字数组

目录

Convert Array of Strings to Array of Numbers in JavaScript