{"id":539,"date":"2023-11-24T04:51:57","date_gmt":"2023-11-24T04:51:57","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=539"},"modified":"2023-11-25T08:42:00","modified_gmt":"2023-11-25T08:42:00","slug":"convert-array-to-string-javascript","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/convert-array-to-string-javascript\/","title":{"rendered":"Convert Array to String JavaScript (5 Easy Methods)"},"content":{"rendered":"\n

JavaScript is a versatile programming language that offers various methods to manipulate data structures. One common task that you will often encounter is converting something to a string. In this article, we will take a deep dive into various techniques to convert array to string in JavaScript. Before that, let’s revise what arrays and strings are really!<\/p>\n\n\n\n

What are Arrays and Strings in JavaScript?<\/strong><\/h2>\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. Let us look at how to declare and use arrays in Javascript.<\/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];\n<\/code><\/pre>\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. \u2018C\u2019 represents a single character and \u201cCat\u201d represents a string. <\/p>\n\n\n\n
5 Methods to Convert Array to String in JavaScript<\/strong><\/h2>\n\n\n\n
In this section, we will discuss various techniques on how to convert an array to a string in JavaScript. <\/p>\n\n\n\n
1) Using the toString() Method<\/strong><\/h3>\n\n\n\n
The simplest method to convert array to string in JavaScript is by using the toString() method. The toString() method converts each element of the array into a string and concatenates them together, separated by commas. <\/strong><\/p>\n\n\n\n
The syntax is as follows:<\/p>\n\n\n\n
let convertedStr = arr.toString()<\/code><\/pre>\n\n\n\n
where, <\/p>\n\n\n\n
convertedStr:<\/strong> variable to store the string that we get from the toString() function.<\/p>\n\n\n\n
arr:<\/strong> variable representing the array that has to be converted to a string.<\/p>\n\n\n\n
Let us look into an example:<\/p>\n\n\n\n
\/\/declaring arrays\nlet arrNum=[1,2,3,4];\n\n\/\/declaring a char array\nlet arrChar=['f','a','v'];\n\n\/\/printing and checking the type of arrays\nconsole.log(arrNum + " " + typeof(arrNum));\nconsole.log(arrChar + " " + typeof(arrChar));\n\n\/\/using the toString() function\nlet convertedStrNum = arrNum.toString();\nlet convertedStrChar = arrChar.toString();\n\n\/\/printing and checking type of convertedStr variables\nconsole.log(convertedStrNum + " " + typeof(convertedStrNum));\nconsole.log(convertedStrChar + " " + typeof(convertedStrChar));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
1,2,3,4 object\nf,a,v object\n1,2,3,4 string \nf,a,v string\n<\/code><\/pre>\n\n\n\n
In this example, we have taken two arrays, one array of integer numbers and the other of characters. We pass these two arrays as parameters to the toString() method that converts them into strings. We store the strings in the variables and print them on the console. We have received the desired output.<\/p>\n\n\n\n
2) Using the join() Method<\/strong><\/h3>\n\n\n\n
The join() method is another method to convert an array to a string in JavaScript. We can choose a specific custom separator to join the elements of the array. The comma(,) is the default separator. Let’s explore how to use the join() method.<\/p>\n\n\n\n
The syntax of the join() method is as follows.<\/p>\n\n\n\n
let convertedStr = arr.join(separator)<\/code><\/pre>\n\n\n\n
where, <\/p>\n\n\n\n
convertedStr:<\/strong> variable to store the string from the toString() function.<\/p>\n\n\n\n
arr:<\/strong> variable representing the array that has to be converted to a string<\/p>\n\n\n\n
Note that separator is an optional parameter here, by default, it\u2019s a comma(,).<\/strong><\/p>\n\n\n\n
Here\u2019s an example of the same.<\/p>\n\n\n\n
\/\/declaring array\nlet arrNum=[1,2,3,4];\nlet arrString=['fav','tutor'];\n\n\/\/printing and checking the type of arrays\nconsole.log(arrNum + " " + typeof(arrNum));\nconsole.log(arrString + " " + typeof(arrString));\n\n\/\/using the join() function\nlet convertedStrNum = arrNum.join(',');\nlet convertedStr = arrString.join('');\n\n\/\/printing and checking type of convertedStr variables\nconsole.log(convertedStrNum + " " + typeof(convertedStrNum));\nconsole.log(convertedStr + " " + typeof(convertedStr));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
1,2,3,4 object\nfav,tutor object\n1,2,3,4 string\nfavtutor string\n<\/code><\/pre>\n\n\n\n
In this example, we have taken two arrays, one integer array, and one string array. We have used the join() method to convert the two arrays to strings.<\/p>\n\n\n\n