DEV Community

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

Posted on • Edited 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

Jetbrains image

Don’t Become a Data Breach Headline

57% of organizations have suffered from a security incident related to DevOps toolchain exposures. Is your CI/CD protected? Check out these nine practical tips to keep your CI/CD secure—without adding friction.

Learn more

Top comments (0)

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay