Convert Array of Strings to Array of Numbers in JavaScript

# Table of Contents

1. Convert Array of Strings to Array of Numbers in JavaScript
2. Convert a String to an Array of Numbers in JavaScript

# Convert Array of Strings to Array of Numbers in JavaScript

To convert an array of strings to an array of numbers:

1. Use the Array.map() method to iterate over the array.
2. Use the parseInt() method to convert each string to a number.
3. The map() method will return a new array that only contains numbers.

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

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

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

The function we passed to the Array.map() method gets called with each element (string) in the array.

On each iteration, we convert the string to a number and return the result.

The parseInt() function parses a string argument and returns an integer of the specified radix.

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

The Array.map() method returns a new array that contains the values that the callback function returned.

You can also use the Number() constructor and the unary plus (+) operator to convert a string to a number.

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

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

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

The Number() constructor creates a Number object from the provided value.

The unary plus (+) operator is a more implicit way to convert a string to a number.

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

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

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

The unary plus (+) operator attempts to convert the value to a number if it already isn't.

An alternative approach is to use the Array.forEach() method.

# Convert Array of Strings to Array of Numbers using Array.forEach()

This is a three-step process:

1. Declare a new variable and initialize it to an empty array.
2. Use the Array.forEach() method to iterate over the strings array.
3. Convert each string to a number and push the number into the new array.

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

const arrOfNum = [];

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

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

We used the Array.forEach() method to iterate over the array of strings.

The function we passed to the method gets called with each element (string) in the array.

On each iteration, we convert the current array element to a number and push the number into the new array.

If you have to do this often, define a reusable function.

Copied!
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]

The function takes an array as a parameter and returns a new array where all elements of the original array are converted to numbers.

You can also use a for...of loop to convert an array of strings to an array of numbers.

# Convert Array of Strings to Array of Numbers using for...of

This is a three-step process:

1. Declare a new variable and initialize it to an empty array.
2. Use a for...of loop to iterate over the array of strings.
3. Convert each string to a number and push the number into the new array.

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

const arrOfNum = [];

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

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

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we use the parseInt() method to convert the current element to a number and push the result to the new array.

Which approach you pick is a matter of personal preference. I'd use the Array.map() method because I find it quite direct and easy to read.

# Convert a String to an Array of Numbers in JavaScript

To convert a string to an array of numbers:

1. Use the split() method to split the string into an array.
2. Use the map() method to iterate over the array.
3. Convert each string to a number.

Copied!
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]

The only parameter we passed to the String.split() method is a separator.

Copied!
const str = '5 15 45';

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

Copied!
const str = '5-15-45';

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

The final step is to call the Array.map() method on the array of strings.

The function we passed to the map method gets called with each element (string) in the array.

On each iteration, we convert the string to a number and return the result.

If your string contains numbers that end with characters, e.g. 15a, you have to use the parseInt() function.

Copied!
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]

Our numbers end with a character, so we can't pass them directly to the Number object.

Instead, we used the parseInt() function to extract the numbers.

We passed the following parameters to the parseInt() function:

• a string we want to parse into a number
• the radix. The default radix is not 10, so we have to explicitly specify it

Note that this approach only works if the number precedes the characters. It wouldn't work if you had a string like a15,b30.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Convert all Array Elements to Uppercase or Lowercase in JS
• Convert an Array of Objects to an Array of Values in JS
• Convert Array to String (with and without Commas) in JS
• Convert a comma-separated String to an Array in JavaScript