Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to turn JavaScript array into the comma-separated list?
In this tutorial, we will learn how we can change the elements of a JavaScript array in a comma-separated list. Sometimes, we need the elements of a JavaScript array in a format that is not returned by the array itself by default, so we need to write some extra code to implement this task. Fortunately, JavaScript allows us to do so by using some in-built methods. We will discuss these methods in detail.
Following are the in-built methods provided by JavaScript to convert the array into a comma-separated list ?
Array join() method
Array toString() method
Let us discuss both of these methods in detail with help of code examples ?
Using the Array join() Method
The join() method joins all the elements of an array and forms a string and returns it later by separating every element with the specified separator passed to the method in form of a string.
Syntax
array.join(separator);
Parameters
separator ? The join() method accepts a separator in the form of string. You can pass any separator of your choice to it like: dot, comma, and, or etc. If there is no separator passed to this method, then by default it will separate all the elements with a comma(",") separator.
Return Value
String ? It will return a string containing all the array elements that are separated by the separator passed to the join() method.
Example
The below example illustrates the use of the join() method to turn a JavaScript array in a comma-separated list ?
<html>
<head>
<title>JavaScript Array join Method</title>
</head>
<body>
<script>
var arr = new Array("Java","PHP","Ruby");
var str = arr.join();
document.write("str : " + str );
var str = arr.join(", ");
document.write("<br />str : " + str );
</script>
</body>
</html>
str : Java,PHP,Ruby str : Java, PHP, Ruby
Different Separators with join()
You can use different separators with the join() method to create custom formatted strings:
<html>
<body>
<script>
var fruits = ["apple", "banana", "orange"];
document.write("Default (comma): " + fruits.join() + "<br>");
document.write("With space: " + fruits.join(" ") + "<br>");
document.write("With dash: " + fruits.join(" - ") + "<br>");
document.write("With pipe: " + fruits.join(" | "));
</script>
</body>
</html>
Default (comma): apple,banana,orange With space: apple banana orange With dash: apple - banana - orange With pipe: apple | banana | orange
Using the Array toString() Method
The toString() method simply converts all the elements of the array into a string and then return that string in the form of a comma-separated list which contains all the elements that contained by the original array. The toString() method does not accept any parameter as a separator to separate elements, it by default returns comma-separated list of all the elements of array.
Syntax
array.toString();
Example
The below example will turn the JavaScript array into a comma-separated list ?
<html>
<body>
<h2>Turn JavaScript array into the comma-separated list</h2>
<p id="result">Original array : ["Tutorialspoint", "Content writing", "Online learning platform"]<br></p>
<button onclick="turn()">Click to turn</button>
<script>
var myElement = document.getElementById("result");
var arr = ["Tutorialspoint", "Content writing", "Online learning platform"];
function turn() {
var turnedArr = arr.toString();
myElement.innerHTML += "<br>The comma-separated list of above array is: " + turnedArr;
}
</script>
</body>
</html>
The comma-separated list of above array is: Tutorialspoint,Content writing,Online learning platform
Comparison
| Method | Customizable Separator | Default Output | Flexibility |
|---|---|---|---|
join() |
Yes | Comma-separated | High |
toString() |
No | Comma-separated | Limited |
Conclusion
Both join() and toString() methods convert arrays to comma-separated strings. Use join() for custom separators and toString() for simple comma separation. The join() method offers more flexibility for different formatting needs.
12K+ Views
