Converting string to an array in JavaScript

Javascript Web Development Front End Technology

The task we need to accomplish is converting an input string to an array in JavaScript.

Whenever we try to break a string word into characters or a sentence into words – splitting into arrays, we have some built-in methods to convert string to an array.

In this article, we will discuss how to convert the string to an array using different methods in JavaScript.

Using the split() method

This method will split the string to an array of substrings. This will return the output in a new array and will not change the existing string.

Split() method accepts 2 parameters and both are optional parameters, the first is a separator. It will describe where each split should happen and this can be a string or regular expression. If we didn’t pass any parameter, it will return the entire string in the array.

The second parameter is limit, the input should an integer that will limit the number of splits.

Example 1

Following is the example of converting a string to an array using the split() method −


<!DOCTYPE html>
<html>
   <title>Converting string to an array in JavaScript</title>
<head>
   <script>
      var string = "We are Tutorials point";
      const arr1 = string.split(' ');
      const arr2 = string.split('');
      const arr3 = string.split(" ", 2)
      document.write(arr1, "<br>", arr2, "<br>", arr3, "<br>");
      let [first, second, third, fourth] = string.split(' ');
      document.write(first, second, third, fourth);
   </script>
</head>
<body>
</body>
</html>

Example 2

Split method with special characters

In the example below, the input sentence has some special characters in it. And we have passed those special characters in split() method. Whenever there is a match with those characters in the string, it will split the sentence there and remove the special character in the output.


<!DOCTYPE html>
<html>
   <title>Converting string to an array in JavaScript</title>
<head>
   <script>
      var string = "Oh, you are working tutorialspoint? that place is amazing! how can i join there; is there any vacancy? please let me know.";
      const array = string.split(/[.,!,?,;]/);
      document.write(array);
   </script>
</head>
<body>
</body>
</html>

Using the Array.from() method

We can also perform the above task by using Array.from() method.

The Array.from() method will return an array as an output from any object having a length property and also from any iterable object. It accepts a parameter object to convert into an array.

Example

Following is the example, where we used Array.from() method to convert string to an array −


<!DOCTYPE html>
<html>
   <title>Converting string to an array in JavaScript</title>
<head>
   <script>
      let string = "Tutorix";
      let arr = Array.from(string);
      document.write(arr);
   </script>
</head>
<body>
</body>
</html>

Using the spread operator(…)

The Spread(…) operator can expand the elements of an array or string as a series of values.

If we pass the string without the spread operator it will not expand the characters of the string instead, it will print the whole string as a single element in an array.

let string = "hello world my name ";
let array = [string];
document.write.log(array); // output: ["hello world my name "]

So we can avoid this by using spread(…) operator. Using this spread operator, it will extract the elements of the string as a series of values.

Example

Following is the example to convert string to an array −


<!DOCTYPE html>
<html>
   <title>Converting string to an array in JavaScript</title>
<head>
   <script>
      let string = "Let's go to new york";
      let arr = [...string];
      document.write(arr);
   </script>
</head>
<body>
</body>
</html>

Using the Object.assign() method

The Object.assign() method will copy all the properties from the source object to the target object. It accepts two parameters, one is the target and the second is the source and it returns the target object.

Following is the syntax of Object.assign() method −

Object.assign(target, sources)

Example

In the example below, we have declared the source object and passed the source as the source parameter to the object.assign() and an empty array as the target parameter. This will return the elements in the string into an array.


<!DOCTYPE html>
<html>
   <title>Converting string to an array in JavaScript</title>
<head>
   <script>
      let string = "Arjun reddy is a cult classic";
      let arr = Object.assign([], string);
      document.write(arr);
   </script>
</head>
<body>
</body>
</html>