How to convert a string to an array in javascript?

In this short tutorial, we look at how to convert a string into an array of characters using javascript. We also look at a few examples and caveats.

This tutorial is a part of our initiative at Flexiple, to write short curated tutorials around often used or interesting concepts. However, in case you are here only for the solution use this link.

String to Array in JavaScript

Converting strings to arrays in JavaScript is done quite frequently and JavaScript comes with a few handy functions to help achieve this. Initially, the only method used was split however after the addition of ES6 a few other methods were also introduced that could be used to convert string to array in JavaScript. Although in this tutorial we focus on the split the other methods that could be used to convert a string to array in JavaScript are Spread, Object.assign, and Array.from.

Once you have understood how strings are converted to array using split please feel free to explore the other methods as well.

Converting string to array using split

As the name suggests, the split() method is used to split a string into ordered substrings. And once split, the substrings are returned in an array. Using this method we are able to convert strings to arrays in JavaScript. With the use of a delimiter the string is split into substrings, these delimiters could be either a " " or even a ,. And while converting a string to an array in javascript we are required to pass these values as an argument.

Syntax of split:

string.split(delimiter, limit)

here, string refers to the original string that we are looking to convert.

Parameters:

delimiter - Optional, the character to be used to split the string. In case it is left empty the entire character in the string is returned in an array.

limit - Optional, an integer value indicating how many times the string needs to be split.

Code & Explanation:

let str1 = "Hire the top 1% freelance developers";

const split_string = str1.split(" ");
console.log(split_string)

//Output = ["Hire", "the", "top", "1%", "freelance", "developers"]

As you could see, we have passed a " " as the delimiter and an array with elements has been returned. Similarly, changing the delimiter accordingly can help you convert strings to arrays in JavaScript. Let's look at a case where , is a delimiter.

let str1 = 'JavaScript,Python,C++,PHP';

const split_string = str1.split(",");
console.log(split_string)

//Output = ["JavaScript", "Python", "C++", "PHP"]

Now, let's take a look at what happens in case a delimiter is not passed while trying to convert a string to array in JavaScript.

let str1 = 'Freelance Develoeprs';

const split_string = str1.split("");
console.log(split_string)

//Output = ["F", "r", "e", "e", "l", "a", "n", "c", "e", " ", "D", "e", "v", "e", "l", "o", "e", "p", "r", "s"]

And as mentioned above an array with each character of the string is returned. Next, let's take a look at an example using the limit parameter.

let str1 = "Hire the top 1% freelance developers";

const split_string = str1.split(" ",4);
console.log(split_string)

//Output = ["Hire", "the", "top", "1%"]

As you can see, the items after the limit were not split. However, keep in mind that the limit does not refer to the index but rather the 4th occurrence of the delimiter.

Limitations & Caveats

While using the split to convert string to array in JavaScript, keep in mind that it only returns an array and that the original string still remains a string.
If no delimiter is passed the entire string is returned as one element in an array and if an empty string "" is passed, the string splits each character and an array.

Short Tech Tutorial's