In an earlier article, we looked at how to convert an array to string in vanilla JavaScript. Today, let us look at how to do the opposite: convert a string back to an array.

String.split() Method

The String.split() method converts a string into an array of substrings by using a separator and returns a new array. It splits the string every time it matches against the separator you pass in as an argument. You can also optionally pass in an integer as a second parameter to specify the number of splits.

For a comma-separated string, you can convert it into an array like this:

const str = 'Apple,Orange,Mango,Cherry';

const fruits = str.split(',');

console.log(fruits);

// ['Apple', 'Orange', 'Mango', 'Cherry']

You can split the string by almost anything: dashes, underscores, or even empty spaces:

const str = 'Apple Orange Mango Cherry';

const fruits = str.split(' ');

If an empty string ("") is used as a separator, the string is split between each character:

const str = 'apple';

const chars = str.split('');

console.log(chars);

// ['a', 'p', 'p', 'l', 'e']

To limit the number of items in the array, you can pass in a second parameter to specify the number of splits. For example, let us limit our fruits list to only include the first two items:

const str = 'Apple,Orange,Mango,Cherry';

const fruits = str.split(',', 2);

console.log(fruits);

// ['Apple', 'Orange']

The String.split() method works in all modern browsers, and back to at least IE 6.

Array.from() Method

The Array.from() method creates a new Array instance from a given array or iterable object. If you pass in a string to Array.from(), it will be converted to a characters array:

const str = '🍑🍓🍉🍇🍒';

const fruits = Array.from(str);

console.log(fruits);

// ['🍑', '🍓', '🍉', '🍇', '🍒']

The Array.from() is part of ES6 and only works in modern browsers. But you can use a polyfill to push the browser support way back to IE6.

Spread Operator

A spread operator (...) is another modern way to convert a string into an array in ES6:

const str = '🍑🍓🍉🍇🍒';

const fruits = [...str];

console.log(fruits);

// ['🍑', '🍓', '🍉', '🍇', '🍒']

Object.assign() Method

You can also use the Object.assign() method to convert a string into a characters array as shown below:

const str = 'JavaScript';

const chars = Object.assign([], str);

console.log(chars);

// ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

Be careful while using Object.assign() to split a string into an array. This method copies "all enumerable own properties". This method means that it will copy all string properties to the new array.

Strings with Emojis

If the string you are trying to split contains emojis, then String.split() and Object.assign() might not be the best choice. Let us look at the following example:

const str = 'Pizza 🍕';

const chars = str.split('');

console.log(chars);

// [ 'P', 'i', 'z', 'z', 'a', ' ', '�', '�' ]

As you can see above, the 🍕 emoji is converted into two unknown characters. This is because the emojis are Unicode characters that are made up of two characters. The String.split() method attempted to split up the emoji into individual characters.

You should always use the Array.from() or a spread operator for strings containing emojis:

const str = 'Pizza 🍕';

const chars = [...str];

console.log(chars);

// [ 'P', 'i', 'z', 'z', 'a', ' ', '🍕' ]

Conclusion

In this article, we looked at 4 different ways to convert a string into an array in JavaScript.

If all you want to do is convert a string into an array of individual characters, you can use any of the above methods. All of them work perfectly fine and produce the same results.

If you want to split a string by a specific character like a comma, dash, empty space, etc., use the String.split() method.

For strings containing emojis, always use the Array.from() method or the spread operator.

Take a look this article to learn more about JavaScript arrays and how to use them to store multiple values in a single variable.

✌️ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. Subscribe to RSS Feed.

👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, Buy me a coffee (cost $5) .

Need help to launch a new product? I am available for contract work. Hire me to accomplish your business goals with engineering and design.