String to Array How to convert a Js string to an array

How to convert a Js string to an array

A string can be converted into an array with the String.split() method. The String.split() method turns or changes a string into an array of strings, by seperating the string at each instance of a special seperator string. What do it mean? let consider an example to explain the phrase.

Example 1 :

The example below show a string been seperated by comma(,) :

     <pre>
         var str = "My,name,is,Tobi,Ajibade";
     </pre>

Now to convert this string into an array, we will use the
string.split(",") method with a comma seperator assigned to it. To do that let me list the various ways a string can be converted to an array.

1. string.split(",") // It will seperate the string on comma(,)
2. string.split(" ") // It will seperate the string on a single space( ), string.split(" ") It will seperate the string on a double space and so on
3. string.split() // It will return all the string as a single array
4. string.split("") // It will seperate the string on a single character

Now, let solve example 1 :

var str = "My,name,is,Tobi,Ajibade";

 str.split(","); // Would return an array with value : ["My","name","is","Tobi","Ajibade"];

             //You should try it in your browser console;

         

Now we know how to seperate a string with a comma seperator

Using the String.split()

             var str = "Am a coder";

             str.split(); // Would return an array with value : ["Am a coder"];

             // it would return all the string because it has no specified seperator

             //You should try it in your browser console

         

Using the String.split() with space seperator

             var str = "Am a front-end developer";

             str.split(" "); // Would return an array with value : ["Am","a","front-end","developer"];

             //You should try it in your browser console

         

Using the String.split() to seperate a single character

 var str = "I can code";

 str.split(""); // Would return an array with value : ["I","C","a","n","c","o","d","e"];

             //You should try it in your browser console

   

But what Would happen if you have a special character like an emoji or smiley : 🧓👩‍🦰🎅😁😍❤💔 , let see

     <pre>
        var str = "I 🤣 to code";
        str.split(""); // Would return an array with value : ["I", " ", "�","�", " ", "t", "o", " ", "c", "o", "d", "e"]
        //You should try it in your browser console
     </pre>

You would notice it didn't output the smiley, it output a "�". These happens because "when an empty string ("") is used as a seperator, The string is not split by user-perceived characters, but by UTF-16 codeunits and this destroys the surogate parts(like emoji and icons)." So how do we solve this? Using Array.from() or spread operator [...str].

Using Array.from()

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.
Read more on array.from() on MDN

             var str = "Tobi 😁 love to code";

             Array.from(str); // would output : ["T", "o", "b", "i", " ", "😁", " ", "l", "o", "v", "e", " ", "t", "o", " ", "c", "o", "d", "e"]

         

Using the spread operator

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected. Read more on spread operator on MDN

                 var str = "Hello tobi 🧡👀💋🎶 to code";

                 [...str]; // would output : ["H", "e", "l", "l", "o", " ", "t", "o", "b", "i", " ", "🧡", "👀", "💋","🎶", " ", "t", "o", " ", "c", "o", "d", "e"]

             

Note : You are not limited to only this 4 split() seperator, you can split a string into an array by any seperator be it ("," "" | \ e.t.c); Read more on string.split() on MDN

         <p>Thanks for reading! You can ask me questions in the comment section. I would be writing an another article soon on Javascript Node</p>