5 ways to convert a String into an Array in JavaScript
Amitav Mishra
Posted on September 20, 2022
The split() method
This method is used to split a string by a separator provided and returns an array of substrings.
const str = 'Tiger,Horse,Elephant,Wolf';
const arr = str.split(',');
//split string by comma
console.log(arr);
// ["Tiger", "Horse", "Elephant", "Wolf"]
To split the string by each character, we can specify an empty string (“”) as the separator.
const str = 'jscurious';
const arr = str.split('');
console.log(arr);
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]
The split()
method accepts a second optional argument which sets the limit on the splits. This limit value decides how many elements will be included in the returned array.
const str = 'Cricket | Hockey | Football | Tennis';
const arr = str.split(' | ', 2);
console.log(arr);
// ['Cricket', 'Hockey']
The Array.from() method
This method returns an array from any iterable object. We can pass a string value to this method to get a character array.
const str = 'jscurious';
const arr = Array.from(str);
console.log(arr);
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]
This method also accepts two optional arguments. One is a map function to call on each element of the array, and the other is a value to use as this
while executing the map function.
const str = 'jscurious';
const arr = Array.from(str, (val, index) => val + index);
// adding index value to each element of array
console.log(arr);
// ["j0", "s1", "c2", "u3", "r4", "i5", "o6", "u7", "s8"]
The spread operator (…
)
The spread operator extracts and spreads each character of a String. We can wrap all those characters inside an array literal []
to create a new array from string.
const str = 'jscurious';
const arr = [...str];
console.log(arr);
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]
The Object.assign() method
This method copies the values and properties from one or more source objects to a target object. We can provide a string as the source and an empty array as the target to create an array from a string.
const str = 'jscurious';
const arr = Object.assign([], str);
console.log(arr);
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]
Using loop
We can loop through each character of a string and push that character to an empty array to create an array from a string.
const str = 'jscurious';
const arr = [];
for (let i of str) {
arr.push(i);
}
console.log(arr);
// ["j", "s", "c", "u", "r", "i", "o", "u", "s"]
You may also like
- Map in JavaScript and when it's a better choice than Object
- JavaScript Set object to store unique values
- Play audio with HTMLAudioElement API in JavaScript
- The URLSearchParams API in JavaScript
- JavaScript Fetch API to make HTTP requests
- The Vibration API in JavaScript
- Generator functions in JavaScript
- A brief guide to Object.defineProperty() method
- A brief guide to Promises in JavaScript
- 20+ JavaScript shorthand coding tricks
Thanks for your time ❤️
Find more of my writings on web development at jscurious.com
Posted on September 20, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.