Home > JavaScript > How to Convert String Value to Array in JavaScript?

How to Convert String Value to Array in JavaScript?

Hello guys, in this tutorial, we will learn how we can convert a string value to an array in javascript. A string could be anything and you can convert it into array values using the javascript methods.

We will also look at a few examples of converting string to array and explain in brief how it is happening. Here we will look at 4 methods of javascript that you can use to convert the string into an array.

Let’s get started.

Method 1 – split()

In this first method, we will use the most common split() method to convert the string into an array. It will split the string and make a new array from them.

Let’s see some examples of a split() method to convert the string into an array of substrings and return a new array.

Example 1

Output
[ 'JavaScript', 'is', 'my', 'favroite' ]

Example 2

Output
[ 'Welcome', 'to', 'Your Blog Coach' ]

So as you see we can use the split() method to convert the string into an array of its substrings. You can split the string with any characters.

Method 2 – Object.assign()

In this method, we will use the Object.assign() method to convert the string into an array. It will copy all the values and properties from one or more source objects to the target object.

You have to pass the square brackets [ ] as the first parameter of assign() and the string will be the second parameter. Let’s see an example.

Example 1

Output
[ 'A', 'w', 'e', 's', 'o', 'm', 'e' ]

Note: The split() and Object.assign() methods will not work with the UTF-8 code characters like emojis characters. It will convert the UTF-8 characters in this type of character � which is not correct.

Method 3 – [...string]

In this method, we will use the javascript Spread Operator (…) with the variable of string that we want to convert into an array.

So you have to use this three dots operator as a prefix of the string and wrap the string into square brackets ([ ]) to make it an array. Let’s see examples.

Example 1

Output
[ 'Y', 'o', 'u', 'r', 'B', 'l', 'o', 'g', 'C', 'o', 'a', 'c', 'h' ]

You can see in the above example, that it can convert the whole word or string into an array. You cannot split the string from a specific place, it split through the character of the string.

If the string has spaces or any operator then it will also make an array of elements. Let’s see an example of it.

Example 2

Output
[ 'Y', 'o', 'u', 'r', '-', 'B', 'l', 'o', 'g', ' ', 'C', 'o', 'a', 'c', 'h' ]

You can see we have a string with space and operator (-) and it is also converted into array elements. The interesting thing is that you can convert the emojis characters (😂, 😊) into array elements using this method. We will see the example below.

Method 4 – Array.from()

Now in this third method, we will use the javascript Array.from() method. It returns an array from any iterable object with a length property. It is a static property of the JavaScript Array object.

You just have to pass the string variable into Array.from() method and it will convert the string into elements of an array. Let’s have an example.

Example 1

Output
[ 'J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't' ]

It can split the emojis character correctly and convert them into array elements. You can use the UTF-8 code characters also in this method. Let’s see an example.

Example 2

Output
[ '😂', 'J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't', '😊' ]

You can see the emojis character also converted into array elements. You can use any emojis or UTF-8 code characters.

Hope this tutorial is helpful for you and that you like it. If you have any questions please do ask me in the comment section, I will respond to you as soon as possible.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment