5 ways to convert a String into an Array in JavaScript

The split() method

This method is used to split a string by a separator provided and returns an array of substrings.

const str = 'Tiger,Horse,Elephant,Wolf';
const arr = str.split(','); 
//split string by comma
console.log(arr);
// ["Tiger", "Horse", "Elephant", "Wolf"]

To split the string by each character, we can specify an empty string (“”) as the separator.

const str = 'jscurious';
const arr = str.split('');
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

The split() method accepts a second optional argument which sets the limit on the splits. This limit value decides how many elements will be included in the returned array.

const str = 'Cricket | Hockey | Football | Tennis';
const arr = str.split(' | ', 2);
console.log(arr); 
// ['Cricket', 'Hockey']

The Array.from() method

This method returns an array from any iterable object. We can pass a string value to this method to get a character array.

const str = 'jscurious';
const arr = Array.from(str);
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

This method also accepts two optional arguments. One is a map function to call on each element of the array, and the other is a value to use as this while executing the map function.

const str = 'jscurious';
const arr = Array.from(str, (val, index) => val + index);
// adding index value to each element of array
console.log(arr); 
// ["j0", "s1", "c2", "u3", "r4", "i5", "o6", "u7", "s8"]

The spread operator (…)

The spread operator extracts and spreads each character of a String. We can wrap all those characters inside an array literal [] to create a new array from string.

const str = 'jscurious';
const arr = [...str];
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

The Object.assign() method

This method copies the values and properties from one or more source objects to a target object. We can provide a string as the source and an empty array as the target to create an array from a string.

const str = 'jscurious';
const arr = Object.assign([], str);
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

Using loop

We can loop through each character of a string and push that character to an empty array to create an array from a string.

const str = 'jscurious';
const arr = [];
for (let i of str) {
  arr.push(i);
}
console.log(arr); 
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]

You may also like

• Map in JavaScript and when it's a better choice than Object
• JavaScript Set object to store unique values
• Play audio with HTMLAudioElement API in JavaScript
• The URLSearchParams API in JavaScript
• JavaScript Fetch API to make HTTP requests
• The Vibration API in JavaScript
• Generator functions in JavaScript
• A brief guide to Object.defineProperty() method
• A brief guide to Promises in JavaScript
• 20+ JavaScript shorthand coding tricks

Thanks for your time ❤️
Find more of my writings on web development at jscurious.com