Skip to main content

How to Convert a Comma-Separated String to an Array in JavaScript

Converting a comma-separated string into an array is a fundamental data manipulation task in JavaScript. This operation is essential for parsing data from CSV files, handling tags from an input field, or processing any delimited data. The primary tool for this is the String.prototype.split() method.

This guide will teach you how to use split() to convert a string to an array. You will also learn how to handle common variations, such as extra whitespace, and how to convert the resulting array elements into numbers.

The Core Method: String.prototype.split()​

The split() method is the standard, built-in way to divide a string into an ordered list of substrings. It takes a separator (or "delimiter") as an argument and returns a new array.

Problem: we have a simple string where values are separated by commas.

// Problem: How to convert this string into an array?
const str = 'apple,banana,cherry';

Solution: by passing a comma as the separator, split() will divide the string at each comma.

const str = 'apple,banana,cherry';
const arr = str.split(',');

console.log(arr); // Output: [ 'apple', 'banana', 'cherry' ]

This is the most direct solution for simple, clean, comma-separated data.

Handling Extra Whitespace Between Elements​

Real-world data is often messy. A common issue is having extra spaces around the commas (e.g., "apple, banana, cherry"). A simple split(',') will leave these unwanted spaces in your array elements.

Example of code with problems:

const strWithSpaces = 'apple, banana,  cherry';
const arr = strWithSpaces.split(',');

// The resulting array has leading spaces, which is usually not desired.
console.log(arr); // Output: [ 'apple', ' banana', '  cherry' ]

Solution: the best way to handle this is to chain the map() method after split() to trim the whitespace from each resulting element.

const strWithSpaces = 'apple, banana,  cherry';

const arr = strWithSpaces.split(',').map(item => item.trim());

console.log(arr); // Output: [ 'apple', 'banana', 'cherry' ]
note
  • The .trim() method removes whitespace from both the beginning and end of a string.
  • This split().map(trim) pattern is a robust and highly readable way to handle messy delimited strings.

Converting the Result to an Array of Numbers​

Another common task is to convert a string of numbers into an array of the number data type, ready for mathematical operations.

Problem: we have a string of comma-separated numbers.

// Problem: How to get an array of numbers, not strings?
const numStr = '10,20,30,40';

Solution: chain the map() method after split(), passing the Number constructor as the callback function. map() will call Number() on each string element, converting it to a number.

const numStr = '10,20,30,40';

const numArray = numStr.split(',').map(Number);

console.log(numArray);           // Output: [ 10, 20, 30, 40 ]

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

This is a concise and highly effective one-liner for this conversion.

Handling Empty or Non-Numeric Values When Converting to Numbers​

What happens if your numeric string is messy, containing empty fields or non-numeric text? The map(Number) trick will produce 0 for empty strings and NaN for non-numeric strings.

Example of code with problem:

const messyNumStr = '10,,20,thirty,40';
const result = messyNumStr.split(',').map(Number);

// The output contains NaN, which is often undesirable.
console.log(result); // Output: [ 10, 0, 20, NaN, 40 ]

Solution: to get a clean array containing only the valid numbers, you should chain the filter() method before you map to Number.

const messyNumStr = '10,,20,thirty,40';

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

console.log(cleanNumArray); // Output: [ 10, 20, 40 ]

How it works:

  • filter(item => ...): Creates a new array containing only the items 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 "thirty").

Conclusion​

The String.prototype.split() method is the definitive tool for converting a comma-separated string to an array in JavaScript.

  • For simple strings, use str.split(',').
  • To handle extra whitespace, use the robust pattern str.split(',').map(item => item.trim()).
  • To convert to an array of numbers, use str.split(',').map(Number).
  • To handle messy numeric strings, add a filter() step before mapping to Number to remove invalid entries.

By combining these simple, chainable methods, you can cleanly and reliably parse any delimited string.

Table of Contents