loading...
Cover image for How to convert a Js string to an array

How to convert a Js string to an array

bigg_aji profile image Tobi Ajibade ใƒป3 min read

Tobi is learning Javascript (2 Part Series)

1) Javascript Ternary Operator 2) 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>

Tobi is learning Javascript (2 Part Series)

1) Javascript Ternary Operator 2) How to convert a Js string to an array

Posted on by:

bigg_aji profile

Tobi Ajibade

@bigg_aji

A Web developer and an aspiring Software Enginner.

Discussion

markdown guide