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!
What are Arrays and Strings in JavaScript?
Arrays are linear data structures that store homogenous data, i.e. same type of data. 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.
//declaring an integers array
let marks = [98, 75, 62, 82, 97, 53];
//declaring a characters array
let grades=['A', 'B', 'A', '0'];
//declaring a strings array
let favtutors=["John", "Joshua", "Alex", "Kate"];
//declaring a boolean array
let present=[true, false, false, true];
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.
Strings in JavaScript represent a sequence of multiple characters. ‘C’ represents a single character and “Cat” represents a string.
5 Methods to Convert Array to String in JavaScript
In this section, we will discuss various techniques on how to convert an array to a string in JavaScript.
1) Using the toString() Method
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.
The syntax is as follows:
let convertedStr = arr.toString()where,
convertedStr: variable to store the string that we get from the toString() function.
arr: variable representing the array that has to be converted to a string.
Let us look into an example:
//declaring arrays let arrNum=[1,2,3,4]; //declaring a char array let arrChar=['f','a','v']; //printing and checking the type of arrays console.log(arrNum + " " + typeof(arrNum)); console.log(arrChar + " " + typeof(arrChar)); //using the toString() function let convertedStrNum = arrNum.toString(); let convertedStrChar = arrChar.toString(); //printing and checking type of convertedStr variables console.log(convertedStrNum + " " + typeof(convertedStrNum)); console.log(convertedStrChar + " " + typeof(convertedStrChar));
Output:
1,2,3,4 object
f,a,v object
1,2,3,4 string
f,a,v string
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.
2) Using the join() Method
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.
The syntax of the join() method is as follows.
let convertedStr = arr.join(separator)where,
convertedStr: variable to store the string from the toString() function.
arr: variable representing the array that has to be converted to a string
Note that separator is an optional parameter here, by default, it’s a comma(,).
Here’s an example of the same.
//declaring array
let arrNum=[1,2,3,4];
let arrString=['fav','tutor'];
//printing and checking the type of arrays
console.log(arrNum + " " + typeof(arrNum));
console.log(arrString + " " + typeof(arrString));
//using the join() function
let convertedStrNum = arrNum.join(',');
let convertedStr = arrString.join('');
//printing and checking type of convertedStr variables
console.log(convertedStrNum + " " + typeof(convertedStrNum));
console.log(convertedStr + " " + typeof(convertedStr));Output:
1,2,3,4 object
fav,tutor object
1,2,3,4 string
favtutor string
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.
- For the integer array, we used a comma as the separator.
- For the string array, we used the separator as an empty string (‘’)
We have obtained the desired results.
3) Using JSON.stringify() Method
There are times when you need to convert array to string without losing the array structure. JavaScript provides the JSON.stringify() method, which converts JavaScript objects, including arrays, to JSON strings. This method can be used to convert arrays to strings in a structured format.
let convertedStr = JSON.stringify(arr);where,
convertedStr: variable to store the string from the toString() function.
arr: variable representing the array that has to be converted to a string
Here’s an example:
//declaring array let arrNum=[1,2,3,4]; let arrString=['fav','tutor']; //printing and checking the type of arrays console.log(arrNum + " " + typeof(arrNum)); console.log(arrString + " " + typeof(arrString)); //using the json.stringify() function let convertedStrNum = JSON.stringify(arrNum) let convertedStr = JSON.stringify(arrString); //printing and checking type of convertedStr variables console.log(convertedStrNum + " " + typeof(convertedStrNum)); console.log(convertedStr + " " + typeof(convertedStr));
Output:
1,2,3,4 object
fav,tutor object
[1,2,3,4] string
[“fav”,”tutor”] string
We can see the stringified strings with the enclosed array brackets. Hence, the JSON.stringify method instead of joining all elements of an array and converting them to a string, makes the whole of an array along with the structure, a string.
4) Using the Concatenation (+) Operator
This method is also called Implicit coercion. It automatically converts the data types from one to another. In the case of converting an array to a string, JavaScript implicitly coerces the array to a string using the concatenation operator (+).
Let us take an example to understand this better:
//declaring array let arrNum=[1,2,3,4]; let arrString=['fav','tutor']; //printing and checking the type of arrays console.log(arrNum + " " + typeof(arrNum)); console.log(arrString + " " + typeof(arrString)); //using the + operator let convertedStrNum = "" + arrNum let convertedStr = "" + arrString; //printing and checking type of convertedStr variables console.log(convertedStrNum + " " + typeof(convertedStrNum)); console.log(convertedStr + " " + typeof(convertedStr));
Output:
1,2,3,4 object
fav,tutor object
1,2,3,4 string
fav,tutor string
We have obtained the desired output.
5) Using the String() Constructor
Explicit coercion is the manual conversion of data types using built-in JavaScript functions. The String() function of the class String can be used to explicitly coerce an array to string.
The syntax of the String() method is as follows.
let convertedStr = String(arr)where,
convertedStr: variable to store the string from the toString() function.
arr: variable representing the array that has to be converted to a string
Let us take an example:
//declaring array let arrNum=[1,2,3,4]; let arrString=['fav','tutor']; //printing and checking the type of arrays console.log(arrNum + " " + typeof(arrNum)); console.log(arrString + " " + typeof(arrString)); //using the String() method let convertedStrNum = String(arrNum) let convertedStr = String(arrString); //printing and checking type of convertedStr variables console.log(convertedStrNum + " " + typeof(convertedStrNum)); console.log(convertedStr + " " + typeof(convertedStr));
Output:
1,2,3,4 object
fav,tutor object
1,2,3,4 string
fav,tutor string
We have used the String() method to convert the array to string. We have obtained the desired output.
You can check out this article if you want to learn how to Convert a String to an Array in JavaScript.
Conclusion
In this article, we have discussed the various techniques to convert an to a string in JavaScript. It is important to keep at least 3 methods in mind as they come in very handy at times. It is important to understand and consider the best practices that help choose an appropriate method based on the requirements. Also learn, how to convert a set to array in JavaScript.
