How to convert a string to an array in JavaScript

How to convert a string to an array in JavaScript

There are four ways to convert a string to an array in JavaScript:

1. The String.split() method uses a separator as a delimiter to split the string and returns an array.
2. The Array.from() method accepts a string as input and returns a character array.
3. Spread operator (...) from ES6 converts the string into a characters array.
4. The Object.assign() method also takes the string as input and returns a character array.

Note: If you need to convert an array to a string in JavaScript, read this article.

String.split() Method

The String.split() method converts a string into an array of substrings using a separator and returns a new array. It splits the string every time it matches against the given separator.

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. However, 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 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.

Read this article to learn more about JavaScript arrays and how to store multiple values in a single variable.

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

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

console.log(fruits);

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

const str = 'Apple Orange Mango Cherry';

const fruits = str.split(' ');

const str = 'apple';

const chars = str.split('');

console.log(chars);

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

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

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

console.log(fruits);

// ['Apple', 'Orange']

const str = '🍑🍓🍉🍇🍒';

const fruits = Array.from(str);

console.log(fruits);

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

const str = '🍑🍓🍉🍇🍒';

const fruits = [...str];

console.log(fruits);

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

const str = 'JavaScript';

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

console.log(chars);

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

const str = 'Pizza 🍕';

const chars = str.split('');

console.log(chars);

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

const str = 'Pizza 🍕';

const chars = [...str];

console.log(chars);

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

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript