How to Convert Array to String in JavaScript with toString() and join()

This brief tutorial will show you two ways to convert JavaScript arrays to strings using the toString() and join() methods.

What Are Arrays?

An array is a data structure which holds multiple values. It’s like a numbered list – each item in the array has a value and a position (called the index). The indexes start counting at position 0, so the first item in an array is at index 0, the second at index 1 and so on.

Converting Arrays to Strings in JavaScript

There are many reasons you may wish to convert an array to a string. Most commonly, you may just want to display the array and its contents as plain text on a web page.

JavaScript arrays can contain any type of value – strings, numbers, objects – so when converting an array to a string, you will need to keep in mind how the values in the array will look once converted also.

The Array toString() Method

The toString() method returns a string representation of an array and its contents.

The syntax is as follows:

array.toString()

Note that:

• array can be any array variable
• A string representation of the array will be returned
• Values in the array will be comma separated in the resulting string
• The original array isn’t modified by calling toString()

Array toString() Examples

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.toString();
console.log(myString);

The above code will output the following to the console:

dog,cat,mouse

Note that the array values have been separated by commas.

Below, several different types are variable are stored in the array prior to converting it to a string to see what the string representations of those objects will look like:

var myArray = ["bird", 1, false, new Date(), {foo: "bar"}];
var myString = myArray.toString();
console.log(myString);

Which will output:

bird,1,false,Wed Nov 10 2021 22:02:23 GMT+0000 (Greenwich Mean Time),[object Object]

Notice that the string and numerical values look as expected, and that the boolean value has been converted to text also.

More interestingly are the last two items in the array.

The date object has it’s own toString() method built-in, which was called to convert it to a string for inclusion in the stringified array.

The generic object ({foo: “bar”}) does not have a toString() method- and thus it’s string representation is a generic object identifier.

The Array join() Method

The join() method works similarly to the toString() method, while allowing you to optionally specify which character will be used to separate the array items in the resulting string.

The syntax is as follows:

array.join(SEPARATOR)

Note that:

• array can be any array variable
• A string representation of the array will be returned
• Values in the array will be comma separated in the resulting string
  • UNLESS the optional SEPARATOR is defined
• The original array isn’t modified by calling join()

Array join() Examples

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.join();
console.log(myString);

The above code will output the following to the console:

dog,cat,mouse

Notice the default comma separated values. You can specify a different separator (or no separator):

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.join('-');
console.log(myString);

Which will return:

dog-cat-mouse

Or, with no separator (specified with an empty string):

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.join('');
console.log(myString);

Which will return:

dogcatmouse

The behavior when dealing with non-string values is the same as with toString(), outlined above:

var myArray = ["bird", 1, false, new Date(), {foo: "bar"}];
var myString = myArray.join();
console.log(myString);

Which results in the following output:

bird,1,false,Wed Nov 10 2021 22:02:23 GMT+0000 (Greenwich Mean Time),[object Object]