How to Get Character Array from String in JavaScript ?
The string is defined as a sequence of characters. In this article, we will learn how to get a character array from a string in JavaScript.
Table of Content
- JavaScript String split() Function
- JavaScript Array.from() Function
- JavaScript Spread Operator
- Using for … of Loop
- Using Array.prototype.map()
- Using Array Destructuring
- Using String.prototype.charAt() Method in a Loop
JavaScript String split() Function
The str.split() function is used to split the given string into an array of strings by separating it into substrings using a specified separator provided in the argument.
Syntax:
str.split(separator, limit);
Example: In this example, we will get a character array from the string using the JavaScript split() method.
// Input string
let str = "w3wiki";
// Use string.split() to Get Character Array
let arr = str.split("");
// Display output
console.log(arr);
Output
[ 'G', 'e', 'e', 'k', 's', 'f', 'o', 'r', 'G', 'e', 'e', 'k', 's' ]
JavaScript Array.from() Function
The Array.from() function creates a new array instance from a given array. In case of string, every alphabet of the string is converted to an element of the new array instance, and in the case of integer values, a new array instance simply takes the elements of the given array.
Syntax:
Array.from(str);
Example: In this example, we will get a character array from the string using the Array.from() function in JavaScript.
// Input array
let str = "w3wiki: A computer science portal";
// Getting char array
let arr = Array.from(str);
// Display output
console.log(arr);
Output
[ 'G', 'e', 'e', 'k', 's', 'f', 'o', 'r', 'G', 'e', 'e', 'k', 's', ':', ' ', 'A', ' ', 'c', 'o', 'm', 'p', 'u', 't', 'e', 'r', ' ', 's', 'c', 'i', 'e', 'n', 'c', 'e', ' ', 'p', 'o', 'r', '...
JavaScript Spread Operator
The Spread operator allows an iterable to expand in place. In the case of a string, it example string into character and we capture all the characters of a string in an array.
Syntax:
let variableName = [ ...value ];
Example: In this example, we will get a character array from the string using the spread operator in JavaScript.
//Input array
let str = "w3wiki";
//Display output using spread operator
console.log([...str]);
Output
[ 'G', 'e', 'e', 'k', 's', 'f', 'o', 'r', 'G', 'e', 'e', 'k', 's' ]
Using for … of Loop
JavaScript for of statement iterates over the values of an iterable object (like Array, Map, Set, arguments object, …,etc), executing statements for each value of the object.
Syntax:
for ( variable of iterableObjectName) {
...
}
Example: In this example, we are using for…of… loop.
const s = '12345';
const a = [];
for (const s1 of s) {
a.push(s1);
}
console.log(a);
Output
[ '1', '2', '3', '4', '5' ]
Using Array.prototype.map()
The Array.prototype.map() approach creates a character array from a string by mapping each character to itself. It iterates over the string, applying a function to each character, and returns a new array with the transformed characters.
Example: In this example we are using Array.prototype.map() with Array.prototype.call() to convert the string into a character array, mapping each character individually. Output: an array of characters.
let str = "w3wiki: A computer science portal";
// Getting char array using Array.prototype.map()
let arr = Array.prototype.map.call(str, char => char);
console.log(arr);
Output
[ 'G', 'e', 'e', 'k', 's', 'f', 'o', 'r', 'G', 'e', 'e', 'k', 's', ':', ' ', 'A', ' ', 'c', 'o', 'm', 'p', 'u', 't', 'e', 'r', ' ', 's', 'c', 'i', 'e', 'n', 'c', 'e', ' ', 'p', 'o', 'r', '...
Using Array Destructuring
Array destructuring can be used to directly extract individual characters from a string into an array.
Example: In this example, we use array destructuring to extract each character from the string into an array.
// Input string
let str = "w3wiki";
// Use array destructuring to directly extract characters into an array
let arr = [...str];
// Display output
console.log(arr);
Output
[ 'G', 'e', 'e', 'k', 's', 'f', 'o', 'r', 'G', 'e', 'e', 'k', 's' ]
Using String.prototype.charAt() Method in a Loop
Another approach to convert a string to a character array in JavaScript is by using the charAt() method in a loop. This method retrieves the character at a specified index in a string. By iterating through the string, you can construct an array of characters.
Example:
In this example, we will use a for loop along with the charAt() method to get a character array from a string.
// Input string
let str = "w3wiki";
// Initialize an empty array to hold characters
let charArray = [];
// Use a for loop to iterate over the string and use charAt() to get each character
for (let i = 0; i < str.length; i++) {
charArray.push(str.charAt(i));
}
// Display output
console.log(charArray);
Output
[ 'G', 'e', 'e', 'k', 's', 'f', 'o', 'r', 'G', 'e', 'e', 'k', 's' ]
arn JavaScript from this JavaScript Tutorial and practice on JavaScript Examples.