Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Convert String to Character Array in JavaScript
To convert a string to character array in JavaScript, is useful when you want to iterate over each charater of the string. It can be used for character manipulation like changing specific character of string. We will be understanding five different approaches for converting a string to character array.
In this article we are having a string value and our task is to convert a string to character array in JavaScript.
Approaches to Convert String to Character Array
Here is a list of approaches to convert a string to character array in JavaScript which we will be discussing in this article with stepwise explaination and complete example codes.
- Using split() Method
- Using Array.from() Method
- Using Object.assign() Method
- Using spread Operator
- Using for loop
Using split() Method
To convert a string to character array in JavaScript, we have used split() method that splits a string object into an array of strings by separating the string into substrings.
- We have used two div elements to display the string and character array using getElementById() and innerHTML property. We have also added a button which triggers strToChar() function upon clicking.
- We have initialized and stored a string in str, and used split() method to convert this string to char array.
Example
Here is a complete example code implementing above mentioned steps to convert a string to character array in JavaScript using split() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Converting a String to Character Array in JavaScript
</title>
</head>
<body>
<h2>
Converting a String to Character Array in JavaScript
</h2>
<p>
In this example we have used <strong>split()</strong>
method to convert a string to a character array in
JavaScript.
</p>
<button onclick="strToChar()">Convert</button>
<br><br>
<div id="string"></div>
<div id="result"></div>
<script>
let str = "TutorialsPoint";
document.getElementById("string")
.innerHTML = "Initial string: " +str;
function strToChar(){
let charArray = str.split('');
document.getElementById("result")
.innerHTML = 'String to char: [' +charArray +']';
}
</script>
</body>
</html>
Using Array.from() Method
In this approach we have used Array.from() method to convert a string to character array in JavaScript that takes the iterable object as the parameter and returns an array of its values.
- We have used two div elements to display the string and character array using getElementById() and innerHTML property. We have also added a button which triggers strToChar() function upon clicking.
- We have initialized and stored a string in str, and used Array.from() method to convert this string to char array.
Example
Here is a complete example code implementing above mentioned steps to convert a string to character array in JavaScript using Array.from() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Converting a String to Character Array in JavaScript
</title>
</head>
<body>
<h2>
Converting a String to Character Array in JavaScript
</h2>
<p>
In this example we have used <strong>Array.from()</strong>
method to convert a string to a character array in
JavaScript.
</p>
<button onclick="strToChar()">Convert</button>
<br><br>
<div id="string"></div>
<div id="result"></div>
<script>
let str = "TutorialsPoint";
document.getElementById("string")
.innerHTML = "Initial string: " +str;
function strToChar(){
let charArray = Array.from(str);
document.getElementById("result")
.innerHTML = 'String to char: [' +charArray +']';
}
</script>
</body>
</html>
Using Object.assign() Method
In this approach to convert a string to character array in JavaScript we have used Object.assign() method. It copies properties and values from source object to target object.
- We have used two div elements to display the string and character array using getElementById() and innerHTML property. We have also added a button which triggers strToChar() function upon clicking.
- We have initialized and stored a string in str, and used Object.assign() method to convert this string to char array.
- Here, an empty array ([]) is the target object and str is the source object.
Example
Here is a complete example code implementing above mentioned steps to convert a string to character array in JavaScript using Object.assign() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Converting a String to Character Array in JavaScript
</title>
</head>
<body>
<h2>
Converting a String to Character Array in JavaScript
</h2>
<p>
In this example we have used <strong>Object.assign()</strong>
method to convert a string to a character array in
JavaScript.
</p>
<button onclick="strToChar()">Convert</button>
<br><br>
<div id="string"></div>
<div id="result"></div>
<script>
let str = "TutorialsPoint";
document.getElementById("string")
.innerHTML = "Initial string: " +str;
function strToChar(){
let charArray = Object.assign([], str);
document.getElementById("result")
.innerHTML = 'String to char: [' +charArray +']';
}
</script>
</body>
</html>
Using spread Operator
In this approach we have used spread operator to convert a string to character array in JavaScript.
- We have used two div elements to display the string and character array using getElementById() and innerHTML property. We have also added a button which triggers strToChar() function upon clicking.
- We have initialized and stored a string in str, and used [...str] method to convert this string to char array.
- In javascript, string are iterable. The [...str] spread operator takes each character of string str and adds them as a separate element to the array charArray.
Example
Here is a complete example code implementing above mentioned steps to convert a string to character array in JavaScript using spread operator.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Converting a String to Character Array in JavaScript
</title>
</head>
<body>
<h2>
Converting a String to Character Array in JavaScript
</h2>
<p>
In this example we have used <strong>spread</strong>
operator to convert a string to a character array in
JavaScript.
</p>
<button onclick="strToChar()">Convert</button>
<br><br>
<div id="string"></div>
<div id="result"></div>
<script>
let str = "TutorialsPoint";
document.getElementById("string")
.innerHTML = "Initial string: " +str;
function strToChar(){
let charArray = [...str];
document.getElementById("result")
.innerHTML = 'String to char: [' +charArray +']';
}
</script>
</body>
</html>
Using for loop
In this approach we have used for loop to convert a string to character array in JavaScript.
- We have used two div elements to display the string and character array using getElementById() and innerHTML property. We have also added a button which triggers strToChar() function upon clicking.
- Then we have used for loop, wehere we iterate over each element of string str untill string length. In each iteration we push one element into array charArray to get character array.
Example
Here is a complete example code implementing above mentioned steps to convert a string to character array in JavaScript using for loop.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Converting a String to Character Array in JavaScript
</title>
</head>
<body>
<h2>
Converting a String to Character Array in JavaScript
</h2>
<p>
In this example we have used <strong>for loop
</strong> to convert a string to a character
array in JavaScript.
</p>
<button onclick="strToChar()">Convert</button>
<br><br>
<div id="string"></div>
<div id="result"></div>
<script>
let str = "TutorialsPoint";
document.getElementById("string")
.innerHTML = "Initial string: " +str;
let charArray = [];
function strToChar(){
for (let i = 0; i < str.length; i++) {
charArray.push(str[i]);
}
document.getElementById("result")
.innerHTML = 'String to char: [' +charArray +']';
}
</script>
</body>
</html>
Conclusion
In this article, We have understood five different approaches to convert a string to a character array which are by using split() method, Array.from() method, Object.assign() method, spread operator and for loop. The split() method is the most popular method while for loop is the slowest approach.
7K+ Views
