5 Ways To Convert JavaScript Array To String
In this article, we are going to see how to convert Javascript array to string in 5 different ways. You will see converting an array to a string with commas, without commas, using the join()
method, etc.
We need to convert an array to a string in JavaScript for various reasons like: the need to send an array to the server for processing, the need to store an array in local storage, the data set stored in an array to be displayed on a web page, etc.
# Quick solution
For your quick answer, convert the Javascript array to string using join() method.
The join()
method will join all the elements of an array into a string by separating them with a specified character. Here is an example:
Example
var arr = ["a", "b", "c", "d", "e"];
var str = arr.join();
console.log(str); // a,b,c,d,e
// join array elements
// without separator
str = arr.join("");
console.log(str);
Output
a,b,c,d,e abcde
The code above demonstrates how you can easily convert an array to a string in JavaScript. We discuss more methods to convert an array to a string below and also explore the join() method in detail.
- Using join() method
- Using toString() method
- Stringifying array to string
- Using coercion
Table Of Contents
1. Convert Array To String Using join() Method
The join() is an array method in JavaScript. It is used to join all the elements of an array into a string by separating them with a given character.
The method takes one argument, which is the separator. The separator is used to separate the elements of an array. The default separator is a comma (,).
arr.join();
// or
arr.join(separator);
After joining all the elements the string is returned.
Example
var arr = ["a", "b", "c", "d", "e"];
// join array elements
var str = arr.join();
console.log(str); // a,b,c,d,e
// join with underscore
str = arr.join("_"); // a_b_c_d_e
console.log(str);
Output
a,b,c,d,e a_b_c_d_e
In the above example when we do not pass any separator, the array is joined with a comma (,) as the default separator. And when you passed underscore (_) as the separator, the array is joined with an underscore as the separator.
Let's try adding multiple characters as the separator.
Example
var arr = ["John", "is", "a", "good", "coder"];
var str = arr.join("###");
console.log(str);
Output
John###is###a###good###coder
2. Using toString() Method
The toString() method is a Javascript method that converts an array to a string by separating the elements with commas.
The method takes no arguments and returns a string.
Example
var arr = ["John", "is", "a", "good", "coder"];
// convert array to string
var str = arr.toString();
console.log(str); // John,is,a,good,coder
Output
John,is,a,good,coder
In the above example, the toString method converts an array to a string by separating the elements with a comma (,).
Later if you want then you can replace these commas with any other character using the replaceAll() method.
The following example shows how to replace the commas with an underscore.
Example
var arr = ["John", "is", "a", "good", "coder"];
// using toString() method
var str = arr.toString();
str = str.replaceAll(",", "_");
console.log(str); // John_is_a_good_coder
Output
John_is_a_good_coder
Note: If the array element itself contains a comma then you have to take care of it using your own logic.
3. Stringifying array to string
You can directly convert an array to a string by using the JSON.stringify() method.
The method takes every element of an array wraps it in double-quotes, separates them with a comma, and returns a string with a square bracket at the beginning and a square bracket at the end.
Example
var arr = ["John", "is", "a", "good", "coder"];
// using JSON.stringify() method
var str = JSON.stringify(arr);
console.log(str); // ["John","is","a","good","coder"]
Output
["John","is","a","good","coder"]
JSON.stringify() method is mostly used to convert a data structure to a string before sending it to the server. Or the data sent by the server is stringified before sending it to the client.
4. Using String() Method
The String() method in Javascript is can convert any value to a string and can so do for an array. It converts an array to a string by separating the elements with commas.
The method takes a array itself as an argument and returns a string.
Example
var arr = ["John", "is", "a", "good", "coder"];
// using String() method
var str = String(arr);
console.log(str); // John,is,a,good,coder
Output
John,is,a,good,coder
5. Using Coercion
Coercion is the process of converting a value to a different type.
In Javascript using an operator over an operand can change the data type of the operand. For example, the operator + can be used to convert a string to a number, adding an empty string to a number will convert the number to a string.
In the same way, if you add a blank array to any existing array, the existing array will be converted to a string. The same happens if you add a string to an array.
Here is an example to show this in action.
Example
var arr = ["John", "is", "a", "good", "coder"];
var str1 = arr + []; // John,is,a,good,coder
console.log(str1);
console.log(typeof str1); // string
var str2 = arr + ""; // John,is,a,good,coder
console.log(str2);
console.log(typeof str2); // string
Output
John,is,a,good,coder string John,is,a,good,coder string
The above method methods to convert Javascript array to string can be generalized into 2 categories:
- JavaScript array to string with commas
- JavaScript array to string without commas
JavaScript array to string with commas
Methods that can be used to convert an array to a string with commas are:
- Using toString() method
- Using join() method
- Using String() method
- Using coercion process
JavaScript array to string without commas
Methods that can be used to convert an array to a string without commas is using the arr.join(" ") with any separator other than a comma or leave it blank.
Example
var arr = ["Ja", "va", "S", "cript"];
var str = arr.join("");
console.log(str); // JavaScript
Output
JavaScript
Conclusion
In this short guide, you have learned 5 different ways to convert Javascript array to string. Among all these methods, the join() method is robust and most commonly used for this purpose.