JavaScript Array to String with Commas

Sometimes we need to convert all array values ​​into a string. One common task that you may encounter when working with JavaScript is converting an array into a string. In this article, we will discuss how to convert a JS array to a string with commas.

Simple methods to convert an array to a string:

There are 4 easy methods to convert it. Let’s see those methods in detail:

1. Using the join() method

In this method, we have converted an array to a comma-separated string using the join() method. It is one of the simplest ways to do that. We can have an optional separator parameter, which specifies the character to use between each element, and by default, the separator is a comma.

const arr = ['One', 'Two', 'Three'];

const str = arr.join();
console.log(str);

// output: 'One', 'Two', 'Three'

1. In this above example code, we have created an array ‘arr’ with 3 elements.
2. Then we created a constant ‘str’ and initialized using the join() method for array ‘arr’.
3. Finally, we logged the constant ‘str’. See the output, the array values are displayed with commas. So, the array values are converted to string successfully.

2. Using the toString() method

The ‘toString()’ method is automatically called when you try to convert an array to a string. This method is also similar that the join() method.

const arr = ['One', 'Two', 'Three'];

const str = arr.toString();
console.log(str);

// output: 'One', 'Two', 'Three'

3: Using a for loop and string concatenation

This is a slightly more difficult method than before methods. In this method we are going to convert manually using for loop and if condition without using any javascript methods(). First, we can use a for loop to iterate over the array elements and concatenate them into a string with commas between each element.

const arr = ['One', 'Two', 'Three']; 

let str = '';
for (let i = 0; i < arr.length; i++) {
  str += arr[i];
  if (i !== arr.length - 1) {
    str += ',';
  }
}

console.log(str)

1. In this example, we initialized the empty string to ‘str’.
2. Then we create a ‘for’ loop with the loop counter variable ‘i’ starting at 0 and incrementing by 1 each time until it reaches the length of the array ‘arr’.
3. Inside the loop, we concatenate the current element of the array arr[i] to the string variable ‘str’ using the += operator. Then we check if ‘i’ is not equal to ‘arr.length – 1’.
4. If ‘i’ is not equal to ‘arr.length – 1’, it concatenates a comma (,) to the string variable ‘str’. If equals, the comma is not added since it is the last element of the array.
5. Finally, we logged constant ‘str’ and it contains all array elements separated by a comma.

4: Using the toLocaleString() method

Finally, we can also use the toLocaleString() to achieve that. The ‘toLocaleString()’ method takes an optional parameter, which specifies the separator to use between each element in the resulting string.

const array = ['One', 'Two', 'Three'];
const string = array.toLocaleString();
console.log(string);

Conclusion

So, we can convert an array to a string with commas in these ways.