6 ways to convert a String to Array with Javascript

A text string in javascript can be converted to Array with 6 different methods.

We will be looking at:

1. split()
2. Array.from()
3. [...spread]
4. Object.assign()
5. for loop
6. JSON.parse()

split()

This method is used to split the text string based on a given separator to return an Array with the separated elements.

let str = 'Lion,Horse,Iguana,Wolf';
let arr = str.split(','); 
//split the text string by a comma
console.log(arr);
//["Lion", "Horse", "Iguana", "Wolf"].

If you want to separate a text string by each letter it contains, then you can pass an empty string ("") as the separator.

let str = 'soylenin';
let arr = str.split('');
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]

The split() method accepts a second parameter in which we can indicate a limit of splits. This limit decides how many elements will be included in the returned array.

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

Array.from()

The Array.from() method returns an Array from the text string passed as a parameter. Just pass a text string to the .from() method to get an array with each letter of the text:

let str = 'soylenin';
let arr = Array.from(str);
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]

This method also accepts two optional parameters in addition to our text string. One is a map() function that will be called on each iteration of our array and the other is a value that can be used as "this" within each iteration of the map.

let str = 'soylenin';
let arr = Array.from(str, (val, index) => val + index);
// adding index value to each element of array
console.log(arr); 
// ["s0", "o1", "y2", "l3", "e4", "n5", "i6", "n7"]

Spread operator

The spread operator is from the new version of ES6 and works in all browsers. It helps us to extract and spread each letter or character of the string used. We only have to wrap the propagation of that string inside our square braces to create a new array from the given string.

let str = 'soylenin';
let arr = [...str];
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]

Object.assign()

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

let str = 'soylenin';
let arr = Object.assign([], str);
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]

For loop

We can loop through each character in a string using for loop and push that character into an empty array to create an array from the string.

let str = 'soylenin';
let arr = [];
for(let i of str) {
    arr.push(i);
}
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]

JSON.parse()

There is an extra way to convert a string into an array, only in this case our string must already contain the array.

let arr =  JSON.parse('[1, 5, "false"]'); 
console.log(arr); 
console.log(typeof arr); 
// [1, 5, "false"]
// "object"

As you will see, it will no longer be a string, but will be transformed into an array.

If you liked the content you can support me in:

Want to earn free Bitcoins and Dogecoins? Click on the banner!