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:

  1. var thearray = STRING.split("");
  2. var thearray = Array.from(STRING);
  3. let thearray = Object.assign([], STRING);
  4. Use the spread operator – var thearray = [...STRING];
  5. Manually loop through the string to create an array.
    • var thearray = [];
    • for (let i of STRING) { thearray.push(i); }
  6. Parse a JSON encoded string – var thearray = JSON.parse(STRING);

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

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

ARRAY TO STRING

All right, let us now get started with the ways to convert a string to an array in Javascript.

 

1) SPLIT FUNCTION

1-split.js
// 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

2-from.js
// 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

3-assign.js
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

4-spread.js
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

5-for-loop.js
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

6-json.js
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.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Convert String To Array In Javascript (Click To Enlarge)

 

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

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.