Convert Comma Separated String to Numeric Array in JS

avatar

Borislav Hadzhiev

Fri Oct 22 20213 min read

Convert Comma Separated String to Numeric Array #

To convert a comma separated string to a numeric array:

  1. Call the split() method on the string to get an array containing the substrings.
  2. Use the map() method to iterate over the array and convert each string to a number.
  3. The map method will return a new array containing only numbers.
index.js
const str = '12,34,56,78,9'; const arr = str.split(',').map(element => { return Number(element); }); // ๐Ÿ‘‡๏ธ [12, 34, 56, 78, 9] console.log(arr);
If your string might contain non-numeric values or empty values between commas, scroll down to the next solution.

We used the String.split method to split the string on each comma.

The split method divides a string into an array of substrings, based on a provided separator.

By splitting the string on each comma, we get an array containing substrings.

index.js
const str = '12,34,56,78,9'; // ๐Ÿ‘‡๏ธ๏ธ ['12', '34', '56', '78', '9'] console.log(str.split(','));

The last step is to convert each string in the array to a number. To achieve this, we use the Array.map method.

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

The map method returns a new array containing all the values the callback function returned.

In the function, we convert each string to a number and return the result.

This gets us an array containing all the numbers from the string.

However, if your string contains empty values between commas, non-numeric characters or punctuation, you have to filter the results first.
index.js
const str = '12,34,,a,!,56,,,78,9'; const arr = str .split(',') .filter(element => { if (element.trim() === '') { return false; } return !isNaN(element); }) .map(element => { return Number(element); }); // ๐Ÿ‘‡๏ธ [12, 34, 56, 78, 9] console.log(arr);

In this example, our string contains empty values between commas, some letters and punctuation.

To deal with this, we use the Array.filter method.

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

If the function returns a truthy value, the element is added to the array the filter method returns.

We first check if the element is equal to an empty string or contains only whitespace and return false if it does.

Finally, we use the isNaN function to check if the provided string is not a number.

We use the logical NOT (!) operator to negate the value returned from the isNaN function.

The isNaN (is not a number) method tries to convert the string into a number and if it fails, it returns true.

index.js
console.log(isNaN('hello')); // ๐Ÿ‘‰๏ธ true console.log(isNaN('')); // ๐Ÿ‘‰๏ธ false console.log(isNaN(' ')); // ๐Ÿ‘‰๏ธ false
This seems quite confusing at first, but the isNaN function converts an empty string or a string containing spaces to a number and gets a value of 0, so it returns false.
index.js
console.log(Number('')); // ๐Ÿ‘‰๏ธ 0 console.log(Number(' ')); // ๐Ÿ‘‰๏ธ 0

This is why we use the trim() method to trim the string and verify that it's not an empty string.

We know that if the isNaN function gets called with a string that contains at least 1 character and returns true, then the string is NOT a valid number.

Conversely, if the isNaN function gets called with a string that contains at least 1 character and returns false, then the string is a valid number.

Here are some more examples of calling isNaN with strings.

index.js
console.log(isNaN('123')); // ๐Ÿ‘‰๏ธ false console.log(isNaN('1.23')); // ๐Ÿ‘‰๏ธ false console.log(isNaN('1,23')); // ๐Ÿ‘‰๏ธ true console.log(isNaN('123test')); // ๐Ÿ‘‰๏ธ true
This means that only numeric values are contained in the array, that the filter method returns. This enables us to call the map method on the array and convert each string to a number.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee