How do you convert a string to a character array in JavaScript?

Front End Technology Javascript Web Development

This tutorial teaches us to convert a string to a character array in JavaScript. A string is the sequence of characters. To solve our problem, we just need to split every character.

There can be various ways to make a character array from the string in JavaScript, and some built-in methods can solve our problem. At the end of the tutorial, we will also learn the manual method of converting string to the array by popping a single character from it and pushing it into the array.

This tutorial will look at five different methods to convert string to array. All methods are explained one by one as follows.

Using the split( ) Method
Using the Array.from() Method
Using the Object.assign() Method
Using the spread Operator
Creating a custom function

Using the split( ) Method

As we have talked about the string in the introduction, it is the sequence of characters, and we just need to split every character. The split() method is the built-in JavaScript method that does the same. We will pass the empty string as a delimiter so that it can split the string to the character and return the array of characters.

Syntax

The syntax for the split() method in JavaScript is given below.

let string = "tutorialsPoint";
let charArray = string.split(delimiter)

Parameters

delimeter − It is the separator. In our case, we will use the empty string to separate every character.

Example

<html>
<head>
   <title> Example - Converting string to character array </title>
</head>
<body>
   <h2> Converting string to character array. </h2>
   <p> Using the string.split('') method to convert to the character array:</p>
   <div id="charArray"> </div>
   <script type="text/javascript">
      let charArray = document.getElementById("charArray");
      let string = "tutorialsPoint";
      let arrayOfChar = string.split(''); // passing empty string as a delimeter.
      charArray.innerHTML = '[ ' + arrayOfChar + ' ]';
   </script>
</body>
</html>

In the above output, the user can see that string “tutorialsPoint” is converted to an array of characters.

Using the Array.from() Method

The Array.from() is the built-in JavaScript library method. The string is the iterable object, and Array.from() takes the iterable object as the parameter and returns an array of its values. We can say that Array.from() the method is used to create the array from any instance we pass as a parameter.

Syntax

The syntax to use the Array.from() method is given below.

let str = "Example string";
let array = Array.from( str );

Parameters

str − It can be any iterable object. The string is also iterable so here we will pass a string as a parameter and the method return the array of the character.

Example

<html>
<body>
   <h2> Converting string to character array </h2>
   <h4> Using the Array.from() method to convert to the character array:</h4>
   <div id="charArray"> </div>
   <script type="text/javascript">
      let array = document.getElementById("charArray");
      let str = " Example string ";
      let arrayOfChar = Array.from(str);
      array.innerHTML = '[ ' + arrayOfChar + ' ]';
   </script>
</body>
</html>

Using the Object.assign() Method

The third method to convert the string to a character array is by using the Object.assign() method. It copies the content from the source object to the destination object. Here, as a source object, we will take a string, and as a destination object, we will use the empty array.

Syntax

Users can follow the below syntax to copy all characters of string into the empty array using the Object.assign() method.

Let string = "Example";
Let array = Object.assign([ ], string );

Example

<html>
<body>
   <h2> Converting string to character array </h2>
   <h4> Using the Object.assing() method to convert to the character array:</h4>
   <div id="outputArray"> </div>
   <script type="text/javascript">
      let outputArray = document.getElementById("outputArray");
      let string = "Converting to the charater array. ";
      let array = Object.assign([], string);
      outputArray.innerHTML = '[ ' + array + ' ]';
   </script>
</body>
</html>

Using the spread operator

In JavaScript, the spread operator is an interesting functionality. The syntax of the spread operator is just three dots (...). It allows users to clone the whole iterable object or array to another array. We will create an empty array and wrap all characters of the string using the spread operator into the empty array.

Syntax

let string = "This is a string.";
let array = [...string]; // using spread operator

Example

<!DOCTYPE html>
<html>
<body>
   <h2> Converting string to character array. </h2>
   <h4> Using the spread operator to convert to the character array: </h4>
   <div id="charArray"> </div>
   <script>
      let array = document.getElementById("charArray");
      let InitialString = "This is a string.";
      let charArray = [...InitialString];
      array.innerHTML = '[ ' + charArray + ' ]';
   </script>
</body>
</html>

Creating a custom function

In this method, we will create an empty array. We will iterate through the string using the for loop and push every character of the string into the array. This way, we will generate the new character array from the string.

Syntax

Follow the below syntax to implement custom function.

let array = [ ];
for ( let i=0; I < string.length; i++ ) {
   array.push ( string[i] );
}

Example

<!DOCTYPE html>
<html>
<body>
   <h2> Converting string to character array. </h2>
   <p> Using the for loop push the character one by one to char array: </p>
   <div id="outputArray"></div>
   <script>
      let outputArray = document.getElementById("outputArray");
      let string = "It's a string. ";
      let resultArray = []; // empty array

      // push the one by one character from the string to array using for loop.
      for (let i = 0; i < string.length; i++) {
         resultArray.push(string[i]);
      }
      outputArray.innerHTML = '[ ' + resultArray + ' ]';
   </script>
</body>
</html>

Conclusion

We have learned five approaches to converting a string to a character array. The first approach using the split() method is the most popular. In the last approach, we have achieved our goal by using the for loop and empty array, which is the slowest method.