cft

How to Convert String to an Array in Javascript

Array is a powerful data structure and in JavaScript conversion of a data type to array is half the solution to many problems. In JS there are few ways to convert string to an array data type. In this article we will have a look at those ways. Read on to know more and solve your problems with ease.


user

James Frederick

15 days ago | 3 min read

Array is a powerful data structure and in JavaScript conversion of a data type to array is half the solution to many problems. In JS there are few ways to convert string to an array data type. In this article we will have a look at those ways. Read on to know more and solve your problems with ease.

Looking to hire JS developers? vteams is the place for you. With competitive prices and outstanding services and exceptional developers you do not have to go anywhere.

Javascript
Uploaded by Pankaj on Unsplash

.split(‘’)

Through the “split” method a string is splitted with a list pattern. It is an ES6 method and one of the easiest and simplest ways to split a string into an array.

const first= 'the first one';

const result= first.split('');

console.log(result);

//['t', 'h', 'e', ' ', 'f', 'i', 'r', 's', 't', ' ', 'o', 'n', 'e']

Another way of using the split method is separating based on white spaces or characters. If we change the above code for 

  • whitespace separating:

const first= 'the first one';

const result= first.split(' ');

console.log(result);

//['the', 'first', 'one']

  • character separating:

const first= 'the-first-one';

const result= first.split('-');

console.log(result);

//['the', 'first', 'one']

The limitation is that this does not work for unicode or other special characters. The result in that case is the unicode of those characters instead of the characters themselves. However, if you want to you can read the MDN guide on how to make it work for unicode characters.

[…str] spread

…str is an ES5 feature which makes it easy to split a string into an array. The good thing about it is, this does not have the limitation with unicode and special characters.

const first= 'the first one';

const result= [...myFavShow];

console.log(result);

//['t', 'h', 'e', ' ', 'f', 'i', 'r', 's', 't', ' ', 'o', 'n', 'e']

Array.from(str);
This method creates a shallow copy of the original array from an iterable object or array object. This string to array split method does not have problems dealing with the unicode and special characters either.

const first= 'the first one';
const result= Array.from(first);
console.log(result);
//['t', 'h', 'e', ' ', 'f', 'i', 'r', 's', 't', ' ', 'o', 'n', 'e']


Object.assign([], str)
This method makes a deep copy of the source or the original string. One of the things about this method is, it copies all the property values from the source to the copy. So, you should keep that in mind before splitting the strings to array with this method. The other thing about this method is, it has problems dealing with unicode and special characters. Similarly, it gives the unicode characters instead of the special characters in the result.

const first= 'the first one';
const result= Object.assign([], first);
console.log(result);
//['t', 'h', 'e', ' ', 'f', 'i', 'r', 's', 't', ' ', 'o', 'n', 'e']

for loop

The old school and most tested method is using a for loop and array.push method. Using the for loop we go through each member of the string and using the array.push() method we then push that member of the string into the array. But, Javascript programmers for hire should know how to use this method.

const first = 'the fist one’;

const array = [];

for (const f of first) {

   array.push(f);

}

console.log(array);
//['t', 'h', 'e', ' ', 'f', 'i', 'r', 's', 't', ' ', 'o', 'n', 'e']

This method does not remove the elements in the string, but copies each element one by one from it.

Another thing about this method is, it works well with the special and unicode characters. However, this is not the most efficient, cleanest, and the fastest way of splitting a string. So, just keep that in mind. 

There are other methods but these are the most used and recommended methods for splitting string into an array in JavaScript. When searching JavaScript developers for hire you can also ask these as questions to assess their skills. If you want to hire Javascript developer then contact vteams today.

Upvote


user
Created by

James Frederick

Developer


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles