Skip to main content

How to Convert an Array of Strings to an Array of Numbers in JavaScript

Converting string representations of numbers into actual number types is a fundamental data sanitization task. This is crucial when you receive data from an API, a CSV file, or a user input form, as these sources often provide numbers as strings (e.g., ["10", "20", "30"]).

This guide will teach you the modern and most effective method for this conversion using Array.prototype.map(). You will also learn how to apply this to a single comma-separated string and how to robustly handle messy data that might contain non-numeric or empty values.

The Core Method: Array.prototype.map()​

The map() method is the perfect tool for transforming every element in an array. It creates a new array by calling a function on each element of the original array and collecting the results.

For example, we have an array of numeric strings and need to convert it into an array of true number types.

// Problem: How to convert ['1', '2', '3'] into [1, 2, 3]?
const stringArray = ['1', '2', '3'];

The recommended solution uses map(Number): the most concise and readable way to perform this conversion is to pass the Number constructor directly to the map() method.

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

const numberArray = stringArray.map(Number);

console.log(numberArray);           // Output: [1, 2, 3]

// Verify the type of the first element
console.log(typeof numberArray[0]); // Output: "number"

How it works:

  • The map() method calls the provided function for each element. stringArray.map(Number) is a shorthand equivalent to stringArray.map(str => Number(str)). It's an elegant feature of JavaScript that makes for clean, declarative code.

Starting from a Single Delimited String​

A very common scenario is starting with a single string where numbers are separated by a delimiter, like a comma. The solution is a simple two-step chain: split, then map.

For example, we have a comma-separated string that needs to be converted into an array of numbers.

// Problem: How to convert "10,20,30" into [10, 20, 30]?
const numString = '10,20,30';

Solution: first, use the String.prototype.split() method to turn the string into an array of strings. Then, use the map(Number) method from the previous step.

const numString = '10,20,30';

const numberArray = numString.split(',').map(Number);

console.log(numberArray); // Output: [10, 20, 30]
note

This powerful one-liner is the standard modern approach for this task.

Handling Messy Data (Non-Numeric or Empty Strings)​

Real-world data is often imperfect. What if your string contains empty fields, extra spaces, or non-numeric text? Simply using split().map(Number) will result in an array with 0 or NaN (Not-a-Number) values, which can cause bugs.

For example, here the output is messy and contains NaN, which is hard to work with.

const messyString = '10, , twenty, 30,';
const result = messyString.split(',').map(Number);

console.log(result); // Output: [ 10, 0, NaN, 30, 0 ]

The robust solution is to add a filter() step to your chain to clean the data before you convert it to numbers.

const messyString = '10, , twenty, 30,';

const cleanNumberArray = messyString
  .split(',')
  .filter(item => item.trim() !== '' && !isNaN(item))
  .map(Number);

console.log(cleanNumberArray); // Output: [ 10, 30 ]

But how it works? This three-step chain is a common pattern in functional JavaScript:

  1. split(','): Converts the string into a raw array: ['10', ' ', ' twenty', ' 30', ''].
  2. filter(...): Creates a new array containing only the elements that pass a test.
    • item.trim() !== '': This filters out any items that are empty or contain only whitespace.
    • !isNaN(item): This filters out any items that are "Not-a-Number" (like " twenty").
    • The result of filter() is a clean array: ['10', ' 30'].
  3. map(Number): Converts the final, clean array of strings into an array of numbers.

Conclusion​

Converting string representations of numbers into an array of number types is a core data manipulation skill in JavaScript.

  • The Array.prototype.map(Number) method is the most concise and modern way to convert an array of clean numeric strings.
  • For a single delimited string, use the powerful chainable pattern str.split(',').map(Number).
  • For messy, real-world data, the robust split().filter().map() pattern is the best practice for cleaning and converting your data in a single, readable line.

Table of Contents