JavaScript - Convert Comma Separated String To Array

Here are the various methods to convert comma-separated string to array using JavaScript.

1. Using the split() Method (Most Common)

The split() method is the simplest and most commonly used way to convert a comma-separated string into an array. It splits a string into an array based on a specified character, such as a comma.

const s = "apple,banana,cherry";
const a = s.split(","); 
console.log(a); 

[ 'apple', 'banana', 'cherry' ]

• s.split(",") splits the string s wherever a comma appears.
• Returns an array of substrings.

2. Using Array.prototype.reduce() Method

You can use the reduce() method to build an array from a string for more control over the conversion process.

const s = "apple,banana,cherry";
const a = s.split("").reduce((obj, char) => {
    if (char === ",") {
        obj.push("");
    } else {
        obj[obj.length - 1] += char;
    }
    return obj;
}, [""]);
console.log(a); 

[ 'apple', 'banana', 'cherry' ]

• The string is split into individual characters using s.split("").
• The reduce() function builds an array by concatenating characters until a comma is encountered.

3. Using Loops and slice() Method

You can manually process the string using loops and the slice() method to extract substrings.

const s = "apple,banana,cherry";
const a = [];
let start = 0;
for (let i = 0; i < s.length; i++) {
    if (s[i] === ",") {
        a.push(s.slice(start, i));
        start = i + 1;
    }
}
a.push(s.slice(start));
console.log(a);

[ 'apple', 'banana', 'cherry' ]

• The loop iterates through the string, finding commas.
• The slice() method extracts substrings between indexes and adds them to the array.

4. Using Regular Expressions (RegExp) and match() Method

The match() method, combined with a regular expression, is useful if the input string contains irregular spacing or special characters around the commas.

const s = "apple , banana , cherry ";
const a = s.match(/[^,\s]+/g); 
console.log(a); 

[ 'apple', 'banana', 'cherry' ]

• [^,\s]+ matches sequences of characters that are not commas or spaces.
• The g flag ensures the regex matches all occurrences in the string.

Handling Edge Cases

When working with user-generated or inconsistent data, consider the following cases

Case 1: Trailing Commas

The filter() method removes empty strings caused by trailing commas.

const s = "apple,banana,cherry,";
const a = s.split(",").filter(item => item !== "");
console.log(a); 

[ 'apple', 'banana', 'cherry' ]

Case 2: Extra Spaces

The map() method trims unnecessary spaces from each substring.

const s = " apple , banana , cherry ";
const a = s.split(",").map(item => item.trim());
console.log(a);

[ 'apple', 'banana', 'cherry' ]

Comparison of Methods