DEV Community 👩‍💻👨‍💻

Cover image for 5 ways to convert a String into an Array in JavaScript
Amitav Mishra
Amitav Mishra

Posted on • Updated on • Originally published at jscurious.com

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

You may also like


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

Top comments (0)

🌚 Life is too short to browse without dark mode