6 Ways To Convert String To Array In Javascript

Welcome to a tutorial on how to convert a string to an array in Javascript. Have a string of data, and want to do some work by turning it into an array first? Here are some ways and quick examples to convert a string to an array:

But just how does each one of them work? Need more actual examples? Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Array To String	Useful Bits & Links
The End

 

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

 

1) SPLIT FUNCTION

// Split at every character
var thestring = "Foo-bar";
var thearray = thestring.split("");
console.log(thearray); // F, o, o, -, b, a, r
 
// Split at "-"
thearray = thestring.split("-");
console.log(thearray); // Foo, bar

Well, this should be self-explanatory. Just use the split(SEPARATOR) function to break the string down into an array. Yes, defining the SEPARATOR, where to split the string is necessary – Even if it is an empty character ""… When left empty, it will just return the entire string as a single element array. I.E. [STRING].

 

2) FROM FUNCTION

// Split at every character
var thestring = "Foo-bar";
var thearray = Array.from(thestring);
console.log(thearray); // F, o, o, -, b, a, r

// Specify a custom mapping function
thearray = Array.from(thestring, function(e){
  if (e == "-") { return "*"; }
  else { return e; }
});
console.log(thearray); // F, o, o, *, b, a, r

The Array.from() function should be pretty self-explanatory too. At the bare minimum, Array.from(STRING), will act just like STRING.split(""). But the interesting part comes with the second parameter, a custom mapping function – We can pretty much use this to do whatever “special processing” is required.

 

 

3) OBJECT ASSIGN

var thestring = "FOOBAR";
var thearray = Object.assign([], thestring);
console.log(thearray); // F, O, O, B, A, R

In English, the above code fragment reads “assign thestring to an empty array []“. Yep, self-explanatory again, and it acts just like STRING.split("").

 

4) SPREAD OPERATOR

var thestring = "FOOBAR";
var thearray = [...thestring];
console.log(thearray); // F, O, O, B, A, R

Want to be the “cool kid down the block”? Use the spread ... operator. What it does, is essentially “break” a string or array down into its individual characters or elements – So [...STRING] will simply break the given string down into a new array. Slick.

 

 

5) MANUAL FOR LOOP

var thestring = "FOOBAR";
var thearray = [];
for (let i of thestring) {
  thearray.push(i);
}
console.log(thearray);

Once upon a time, in the Iron Age of the Internet, this is how we work with strings. What!? Yes, we can loop through a string, and every beginner’s tutorial probably touched on it already.

 

6) JSON PARSE

var thestring = '["Red","Green","Blue"]'; // JSON encoded string
var thearray = JSON.parse(thestring);
console.log(thearray); // Red, Green, Blue

What is JSON? Javascript Object Notation. In layman’s terms, we use the JSON.stringfy(ARRAY) function to turn an array or object into a JSON encoded string – Then store or transfer it somewhere. We can then retrieve this JSON encoded string, do the opposite of JSON.parse(STRING) to get the “original” array or object back.

 

 

 

INFOGRAPHIC CHEAT SHEET

 

SUMMARY

Function/Operator	Description	Reference Link
STRING.split(SEPARATOR)	Convert the string to an array. Elements will be separated by the defined SEPARATOR.	Click Here
Array.from(STRING, FUNCTION)	Convert the given string, to an array. The mapping FUNCTION is optional.	Click Here
Object.assign(TARGET, SOURCE)	Assigns the SOURCE to the TARGET.	Click Here
JSON.parse(STRING)	Parse a JSON encoded string back into an array or object.	Click Here
...	The spread operator.	Click Here

 

LINKS & REFERENCES

• 4 Ways to Convert String to Character Array in JavaScript – Samantha Ming