How to convert a Js string to an array
Tags: javascript, string, array, stringmethod
Published: 2020-03-09 11:13:35

How to convert a Js string to an array
        <p>A string can be converted into an array with the <code>String.split()</code> method. The <code>String.split()</code> 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.</p>
<h3>Example 1 :</h3>
<p>The example below show a string been seperated by comma(,) :</p>
         <pre>
             var str = "My,name,is,Tobi,Ajibade";
         </pre>
 <p>Now to convert this string into an array, we will use the 
 <code>string.split(",")</code> 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.</p>
         <ol>
             <li>string.split(",") // It will seperate the string on comma(,) </li>
             <li>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</li>
             <li>string.split() // It will return all the string as a single array</li>
             <li>string.split("") // It will seperate the string on a single character </li>
         </ol>
         <p>Now, let solve example 1 :</p>
         <pre>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;
         </pre>
 <p>Now we know how to seperate a string with a comma seperator</p>
 <h3>Using the <code>String.split()</code></h3>
         <pre>
             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
         </pre>
 <h3>Using the <code>String.split()</code> with space seperator</h3>
         <pre>
             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
         </pre>
 <h3>Using the <code>String.split()</code> to seperate a single character</h3>
         <pre>
 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
   </pre>
<p>But what Would happen if you have a special character like an emoji or smiley : 🧓👩‍🦰🎅😁😍❤💔 , let see</p>
         <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>
  <p>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].</p>
 <h3>Using <code>Array.from()</code></h3>
  <p>The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object. 
             <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Read more on array.from() on MDN</a>
         </p>
         <pre>
             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"]
         </pre>
 <h3>Using the spread operator</h3>
 <p>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. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Read more on spread operator on MDN</a></p>
             <pre>
                 var str = "Hello tobi 🧡👀💋🎶 to code";
                 [...str]; // would output : ["H", "e", "l", "l", "o", " ", "t", "o", "b", "i", " ", "🧡", "👀", "💋","🎶", " ", "t", "o", " ", "c", "o", "d", "e"]
             </pre>
<p>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);
                 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">Read more on <code>string.split() on MDN</code></a>
             </p>
             <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>