How to convert comma-separated string to numeric array in JavaScript

We will learn how to convert comma-separated string to numeric array in JavaScript using two different approaches, namely split() and map(). Each approach is relatively straightforward, and you can choose whichever you want. Let’s get started!

Convert comma-separated string to numeric array in JavaScript

Using split() and a loop.

When split() is called, it searches a string for a specific pattern and divides it into multiple substrings. These substrings are placed into an array, and the array of substrings is then returned.:

Syntax:

split(separator)

Parameter:

  • split: The pattern that describes where to split.

First, assume your string has a list of numbers that is separated by semicolons. Then use split() to achieve an array of split strings. After that, convert each string in the array to the numeric type and push it to the destination array:

var str = "2,4,6,8";

// Convert comma-separated string to an array of substrings
var subStrings = str.split(",");

// Create a result array
var numericArray = [];

// Convert comma-separated string to a numeric array
for (var subString of subStrings) {
    numericArray.push(+subString);
}

console.log(numericArray);

Output: 

[2,4,6,8]

If your string contains not only numbers but also characters or not numbers, you must remove them from the destination array. Otherwise, your array will contain some null elements:

var str = "2,ba,4,4+1,6,seven,8";

// Convert comma-separated string to an array of substrings
var subStrings = str.split(",");

// Create a result array
var numericArray = [];

// Convert comma-separated string to a numeric array
for (var subString of subStrings) {
    if (+subString) {
        numericArray.push(+subString);
    }
}

console.log(numericArray);

Output:

[2,4,6,8]

In the example above, we have used the + operator to convert numeric strings to numbers and also to remove non-numeric strings from the array if they are not valid. This method is not only easy to understand but also easy to implement. However, there is also an approach that can help you do this with just a line of code in the next solution.

Using split() and map()

Syntax:

map(callbackFn)

Parameter:

  • callbackFn: The callbackFn function is called for each element, and its returned value is added to newArray.

When the map method is called, a new array is created that contains the results of applying the callbackFn function provided to every element of the calling array:

var str = "2,4,6,8";

// Convert comma-separated string to numeric array
var numericArray = str.split(",").map(Number);
console.log(numericArray);

Output: 

[2,4,6,8]

The Number prototype converts values of other types into numbers. Constants and methods in the Number constructor help you work with numbers. Number(value) converts a string, floating-point number, boolean value, or null value to the Number type. If the input value can’t be converted, null is returned.

Summary

We have learned how to convert comma-separated string to numeric array in JavaScript using two different solutions. It would help if you considered that the second solution is what we suggest. We hope you will be successful using our tutorial. Please let us know if you have any questions in the reply section and we will answer soon. Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *