Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do you Convert a String to a Character Array in JavaScript?
Converting a string to a character array in JavaScript is useful when you want to iterate over each character or manipulate individual characters. JavaScript provides several built-in methods and techniques to accomplish this transformation.
In this article, we'll explore five different approaches to convert a string to a character array in JavaScript, each with its own advantages and use cases.
Approaches to Convert String to Character Array
Here are the five methods we'll cover with complete examples and explanations:
- Using split() Method
- Using Array.from() Method
- Using Object.assign() Method
- Using Spread Operator
- Using for Loop
Using split() Method
The split() method is the most common approach. It splits a string into an array by separating at specified delimiters. Using an empty string as the delimiter splits every character.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converting String to Character Array - split() Method</title>
</head>
<body>
<h2>Converting String to Character Array</h2>
<p>Using <strong>split()</strong> method to convert string to character array.</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 = 'Character array: [' + charArray.join(', ') + ']';
}
</script>
</body>
</html>
Using Array.from() Method
The Array.from() method creates a new array from an iterable object. Since strings are iterable in JavaScript, this method works perfectly for string-to-array conversion.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converting String to Character Array - Array.from() Method</title>
</head>
<body>
<h2>Converting String to Character Array</h2>
<p>Using <strong>Array.from()</strong> method to convert string to character array.</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 = 'Character array: [' + charArray.join(', ') + ']';
}
</script>
</body>
</html>
Using Object.assign() Method
The Object.assign() method copies properties from a source object to a target object. Since strings have indexed properties (str[0], str[1], etc.), this method can copy these into an array.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converting String to Character Array - Object.assign() Method</title>
</head>
<body>
<h2>Converting String to Character Array</h2>
<p>Using <strong>Object.assign()</strong> method to convert string to character array.</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 = 'Character array: [' + charArray.join(', ') + ']';
}
</script>
</body>
</html>
Using Spread Operator
The spread operator (...) expands iterable elements. Since strings are iterable, the spread operator can expand each character into array elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converting String to Character Array - Spread Operator</title>
</head>
<body>
<h2>Converting String to Character Array</h2>
<p>Using <strong>spread operator</strong> to convert string to character array.</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 = 'Character array: [' + charArray.join(', ') + ']';
}
</script>
</body>
</html>
Using for Loop
The traditional for loop approach manually iterates through each character and pushes it into an array. This method offers the most control but requires more code.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converting String to Character Array - for Loop</title>
</head>
<body>
<h2>Converting String to Character Array</h2>
<p>Using <strong>for loop</strong> to convert string to character array.</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 = [];
for (let i = 0; i < str.length; i++) {
charArray.push(str[i]);
}
document.getElementById("result").innerHTML = 'Character array: [' + charArray.join(', ') + ']';
}
</script>
</body>
</html>
Performance Comparison
| Method | Performance | Readability | Browser Support |
|---|---|---|---|
split('') |
Fast | Excellent | All browsers |
Array.from() |
Fast | Excellent | ES6+ |
Object.assign() |
Moderate | Good | ES6+ |
[...str] |
Fast | Excellent | ES6+ |
for loop |
Slower | Fair | All browsers |
Conclusion
The split('') method remains the most popular choice for converting strings to character arrays due to its simplicity and universal browser support. For modern applications, the spread operator and Array.from() provide clean, readable alternatives with excellent performance.
7K+ Views
