Convert Array of Strings to Array of Numbers in JavaScript

avatar
Borislav Hadzhiev

Last updated: Dec 31, 2022
4 min

banner

# 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.
index.js
const arrOfStr = ['1', '2', '3']; const arrOfNum = arrOfStr.map(str => { return parseInt(str, 10); }); // ๐Ÿ‘‡๏ธ [1, 2, 3] console.log(arrOfNum);

convert array of strings to array of numbers

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.

index.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

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

The Array.map method doesn't change the contents of the original array, it returns a new array.

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

index.js
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.

index.js
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.
index.js
const arrOfStr = ['1', '2', '3']; const arrOfNum = []; arrOfStr.forEach(str => { arrOfNum.push(parseInt(str)); }); // ๐Ÿ‘‡๏ธ [1, 2, 3] console.log(arrOfNum);

convert array of strings to array of numbers using foreach

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.

index.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]

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.
index.js
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.
index.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]

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

In this example, the numbers are separated by a comma in the string, however, they could be separated by a space or any other character.
index.js
const str = '5 15 45'; // ๐Ÿ‘‡๏ธ ['5', '15', '45'] console.log(str.split(' '));
If your numbers are separated by another character(s), pass the character(s) as a parameter to the split() method.
index.js
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.

The map() method returns a new array that contains only the values that the function returned - in our case all the numbers.

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

index.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]

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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev