Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do you convert a string to a character array in JavaScript?
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.
5K+ Views
