JavaScript Convert Comma Separated String To Numeric Array

To convert comma separated string to numeric array in JavaScript –

  1. Use the split(,) method to split the string by comma and create a new array.
  2. Use the map() method to iterate over the array and convert each array element to a number.

Let’s discuss this method in detail below.

convert comma separated string to numeric array in javascript

Convert Comma Separated String To Numeric Array In JavaScript

The split() method is used to split a string into an array of substrings. This method accepts two arguments –

  1. The delimiter on which the string is to be split.
  2. The limit up to which the string is to be split.
  3. If no limit is specified, it will split the entire string.

Syntax:

str.split(separator, limit) //where str is the string to be split

The map() method is used to create a new array with the results of calling a function on every element in an array.

Syntax:

arr.map(callback, thisArg) //where arr is the input array and callback is the function to run on each element

Now let’s see how we can use these methods to convert a comma separated string to numeric array.

var str = "1,2,3";

var arr = str.split(",");

console.log(arr); // ["1", "2", "3"]

var num_arr = arr.map(Number);

console.log(num_arr); // [1,2,3]

In the above code, we have first used the split(,) method to split the string by comma and create a new array. Then, we have used the map() method to iterate over the array and convert each array element to a number.

Here each value in the string array was already a number. What if there are spaces, non-numeric characters or punctuation in the string? You can use the filter() method to remove these elements from the array and then use map() to convert the remaining elements to numbers.

var str = "1, 2, 3, , &, %^, null, 4";

var arr = str.split(",");

console.log(arr); // ["1″, " 2″, " 3″, " 4″]

//remove spaces and non-numeric elements

var num_arr = arr.filter(function(e){

  return e.trim()!==" && !isNaN(e);

}).map(Number);

console.log(num_arr); // [1, 2, 3, 4]

In the above code, we have an array containing spaces, non-numeric characters and null values. We have used the filter() method to remove these elements from the array and then used map() to convert the remaining elements to numbers.

In the filter() callback function, we have used the trim() method to remove all spaces from an element and checked if the element is empty after trimming, and then checked if it is not a number using the isNaN() method. If both these conditions are true, then that element is removed from the array.

The isNaN() method returns true if the value is not a number, else it returns false.

For example,

isNaN("12") //false

isNaN("abc") //true

isNaN(" ") //false

isNaN("") //false

isNaN(null) //false

As you can see, the isNaN() method returns false for empty strings and null. So, you have to do the trim() check first and then use isNaN().

Conclusion

In this article, we have learned how to convert comma separated string to numeric array in JavaScript. We have also seen how to remove spaces and non-numeric elements from the array before converting it to numbers.

I hope you found this article helpful. Thank you for reading!

Leave a Reply