In the world of JavaScript programming, there often comes a time when we need to convert string to array. Whether it’s breaking down a sentence into individual words or splitting a string of characters, you need to know how this as a developer. In this article, we will discuss various techniques on how to convert a string to an array in JavaScript.<\/p>\n\n\n\n
Arrays are linear data structures that store homogenous data, i.e. same type of data.<\/strong> An array can contain all integers, all characters, or all strings as the elements. An array can not be a combination of integers and characters, or integers or strings. <\/p>\n\n\n\n Let us look at how to declare and use arrays in Javascript:<\/p>\n\n\n\n In the code above, we have made integers array marks containing all integers, a characters array grade consisting of all elements as characters, a strings array ‘favtutors’ consisting of all strings, and a boolean present array consisting of all boolean values.<\/p>\n\n\n\n Strings in JavaScript represent a sequence of multiple characters.<\/strong> \u2018C\u2019 represents a single character and \u201cCat\u201d represents a string. In JavaScript, we can declare a string in two ways. Let us look into each method.<\/p>\n\n\n\n We can declare a string in JavaScript by making a string literal using double quotes. The syntax and example for the same is given below.<\/p>\n\n\n\n Output<\/strong>:<\/p>\n\n\n\n We can declare a string in JavaScript by creating a String object. An example of the same is given below.<\/p>\n\n\n\n Output<\/strong>:<\/p>\n\n\n\n In this section, we will discuss various techniques on how to convert a string to an array in JavaScript. <\/p>\n\n\n\n It is the most commonly used approach to convert string to array in JavaScript. The split() method allows you to split a string into an array of substrings based on a specified delimiter. A delimiter is a character (or more than one character) such as a comma, a space, etc that separates two text strings.<\/p>\n\n\n\n The split() method is invoked on a string and takes a delimiter as an argument. It splits the string into an array of substrings at each occurrence of the delimiter. Let us take a look at the example below.<\/p>\n\n\n\n In the above example, we split the string str at every occurrence of the comma (“,”) and store the resulting substrings in the arr array. <\/p>\n\n\n\n Output<\/strong>:<\/p>\n\n\n\n Let us take a look at another example.<\/p>\n\n\n\n Output<\/strong>:<\/p>\n\n\n\n As the output shows, the array contains only one element as there is no comma delimiter, hence the string components are not separated.<\/p>\n\n\n\n One of the easiest methods to convert a string to an array in JavaScript is by using the Array.from() method. <\/strong>This method converts an iterable object or a string into an array. When applied to a string, it creates an array of individual characters. <\/p>\n\n\n\n Let us look at an example:<\/p>\n\n\n\n Output<\/strong>:<\/p>\n\n\n\n In this example, we convert the string to an array using the Array.from() method. We have obtained the desired output. <\/p>\n\n\n\n Another method to convert string to array is by using the spread operator (…) in JavaScript. It expands the elements of an iterable object or a string into individual values. When applied to a string, it creates an array of individual characters. <\/p>\n\n\n\n Here is example to understand:<\/p>\n\n\n\n Output<\/strong>:<\/p>\n\n\n\n In this example, we convert the string to an array using the spread operator (…). We have obtained the desired output. <\/p>\n\n\n\n The Object.assign() method can also be utilized to convert a string to an array in JavaScript. This method copies the properties of one or more objects to a target object. When used with an empty array as the target object, it converts the string into an array of individual characters. <\/p>\n\n\n\n Let us take an example:<\/p>\n\n\n\n Output<\/strong>:<\/p>\n\n\n\n In this example, we pass an empty array as the target object to the Object.assign() method along with the string str. We have obtained the desired output. <\/p>\n\n\n\n\/\/declaring an integers array\nlet marks = [98, 75, 62, 82, 97, 53];\n\n\/\/declaring a characters array\nlet grades=['A', 'B', 'A', '0'];\n\n\/\/declaring a strings array\nlet favtutors=[\"John\", \"Joshua\", \"Alex\", \"Kate\"];\n\n\/\/declaring a boolean array\nlet present=[true, false, false, true];<\/code><\/pre>\n\n\n\nWhat are Strings in JavaScript?<\/strong><\/h3>\n\n\n\n
\/\/declaring a string literal\nlet a="FavTutor"\n\n\/\/printing the string\nconsole.log(a);<\/pre><\/div>\n\n\n\n
FavTutor<\/code><\/pre>\n\n\n\n\/\/declaring a string using String Object\nlet str=new String("FavTutor")\n\n\/\/printing the string\nconsole.log(str);<\/pre><\/div>\n\n\n\n[ String: \u2018FavTutor\u2019 ]<\/code><\/pre>\n\n\n\n4 Methods to Convert String to Array<\/strong><\/h2>\n\n\n\n
1) Using the split() Method<\/strong><\/h3>\n\n\n\n
\/\/declaring a string literal\nlet str = "Hello FavTutor";\n\n\/\/using the split function\nlet arr = str.split(",");\n\n\/\/Printing the Array\nconsole.log(arr);<\/pre><\/div>\n\n\n\n[ \u2018Hello\u2019, \u2018FavTutor\u2019 ]<\/code><\/pre>\n\n\n\n\/\/declaring a string literal\nlet str = "Hello FavTutor";\n\n\/\/using the split function\nlet arr = str.split(",");\n\n\/\/Printing the Array\nconsole.log(arr);<\/pre><\/div>\n\n\n\n[ \u2018Hello FavTutor\u2019 ]<\/code><\/pre>\n\n\n\n2) Using the Array.from() Method<\/strong><\/h3>\n\n\n\n
\/\/declaring a string literal\nlet str = "FavTutor";\n\n\/\/using the Array.from() function\nlet arr = Array.from(str);\n\n\/\/Printing the Array\nconsole.log(arr);<\/pre><\/div>\n\n\n\n
[ \u2018F\u2019, \u2018a\u2019, \u2018v\u2019. \u2018T\u2019, \u2018u\u2019, \u2018t\u2019, \u2018o\u2019, \u2018r\u2019 ]<\/code><\/pre>\n\n\n\n3) Using the Spread Operator<\/strong><\/h3>\n\n\n\n
\/\/declaring a string literal\nlet str = "FavTutor";\n\n\/\/using the spread operator\nlet arr = [...str];\n\n\/\/Printing the Array\nconsole.log(arr);<\/pre><\/div>\n\n\n\n
[ \u2018F\u2019, \u2018a\u2019, \u2018v\u2019, \u2018T\u2019, \u2018u\u2019, \u2018t\u2019, \u2018o\u2019, \u2018r\u2019 ]<\/code><\/pre>\n\n\n\n4) Using the Object.assign() Operator<\/strong><\/h3>\n\n\n\n
\/\/declaring a string literal\nlet str = "FavTutor";\n\n\/\/using the spread operator\nlet arr = Object.assign([],str)\n\n\/\/Printing the Array\nconsole.log(arr);<\/pre><\/div>\n\n\n\n
[ \u2018F\u2019, \u2018a\u2019, \u2018v\u2019, \u2018T\u2019, \u2018u\u2019, \u2018t\u2019, \u2018o\u2019, \u2018r\u2019 ]<\/code><\/pre>\n\n\n\nConclusion<\/strong><\/h2>\n\n\n\n