How to convert a Js string to an array

Tobi Ajibade — Mon, 09 Mar 2020 11:13:35 +0000

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.

string.split(",") // It will seperate the string on comma(,)
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
string.split() // It will return all the string as a single array
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>

Javascript Ternary Operator

Tobi Ajibade — Fri, 24 Jan 2020 19:13:35 +0000

Conditional or ternary Operator

A conditional operator assigns a specified value to a variable based on some conditions, i.e it assigns a value to a variable if a condition is true , otherwise assigns an alternate value if condition is false.

Syntax

variable name = (condition) ? value1 : value2;

Practical Example

Let write a script to check how experience a web developer is, depending on their years of experience in the industry

Javascript code


function checkExp() {
var input, output;
input = document.getElementById("expcheck").value;
  output = (input < 2) ? "You're a young developer" : "You're an experienced developer";
document.getElementById("output").innerHTML = output;
}

Below is the snippet in codepen

This is actually my first post. Thanks for reading!

Free to hit me up in the comment section.

[Deleted User]

FCC:Tribute Page

Tobi Ajibade — Tue, 17 Dec 2019 06:13:44 +0000

?signin=true

DEV Community: Tobi Ajibade

How to convert a Js string to an array

Example 1 :

Using the String.split()

Using the String.split() with space seperator

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

Using Array.from()

Using the spread operator

Javascript Ternary Operator

Conditional or ternary Operator

Practical Example

[Deleted User]

FCC:Tribute Page

Using the `String.split()`

Using the `String.split()` with space seperator

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

Using `Array.from()`