Converting string to array JavaScript?

In this short tutorial, we look at how to convert a string to an array in JavaScript. We also look at a few examples and caveats.

However, in case you are here only for the solution use this link.

Table of Contents - String to Array JavaScript

  • String to Array in JavaScript
  • Converting strings to array using split
  • Limitations & Caveats

String to Array in JavaScript

JavaScript comes with a few handy functions to facilitate converting strings to arrays, as it’s a common practice.

Initially, the only method available for this was split(). However, after the addition of ES6, alternative methods were introduced that could be used to convert string to array.

Although in this tutorial we focus on the method using split(), the other methods that can be used are Spread, Object.assign, and Array.from.

Converting string to array using split:

In this method, we use split() to convert a string to array in JavaScript. After the split is used, the substring is returned in an array.

Using the following syntax we can convert strings to arrays in JavaScript. The split() methods take in a delimiter as a parameter and based on the specifying value the string is split.

Syntax of split:

string.split(delimiter, limit)

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

Parameters:

  • delimiter - Optional, the string will be split based on this value. In case it is left empty, an array containing each character is returned.
  • 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"]

In the above code, we have passed " " as the delimiter and an array split by each space is 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 left empty while trying to convert a string to array in JavaScript.

let str1 = 'Freelance Developers';

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"]

As shown above, an array containing each individual character 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 values 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.

Limitation & 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.