How to Easily Convert Array to String in JavaScript

There are 5 ways to easily convert Array to String in JavaScript where most of them are 1 liner code. Let’s explore the methods.

Methods to Convert Array to String in JavaScript

Here are the list of 5 methods where we can convert array to string. Since each of them have their own properties and features, we can choose which to use depending on our needs.

• Array toString() Method
• Array join() Method
• String concat() Method
• JSON.stringify() Method
• Type Coercion Method

Let’s look into each details with illustration below.

Array toString() Method

toString() is part of original standard Array built-in object method in JavaScript.

Its features includes:

• Creates a new string separated with comma
• Does not change original data

Below shows the example of converting an array of strings to one string.

const myArray = ['one', 'two', 'three'];
const myString = myArray.toString();

console.log(myString); // "one,two,three"

If we do not want the comma, we can perform a remove operation by using the replace(). It takes in 2 parameters; the characters to replace and the replacement character.

In the example below, we replace the commas with nothing.

const myArray = ['one', 'two', 'three'];
const myString = myArray.toString();

const newString = myString.replace(/,/g, '');

console.log(newString); // "onetwothree"

// Chain Method
console.log(myArray.toString().replace(/,/g, '')); // "onetwothree"

Array join() Method

join() is part of original Array standard built-in object method in JavaScript.

Its features includes:

• Creates a new string by concatenating all elements in an array
• Allows customisation of separator (Default separator is comma)
• If only 1 element, the return will be this element without separator
• Does not change original data

Below shows the example of converting an array with join() Method with different replacement configurations.

const myArray = ['one', 'two', 'three'];

console.log(myArray.join());     // "one,two,three"
console.log(myArray.join(' '));  // "one two three"
console.log(myArray.join(''));   // "onetwothree"

String concat() Method

concat() is part of original String standard built-in object method in JavaScript.

Its features includes:

• Creates a new string by concatenating all string arguments
• Does not change original data

Below shows the example of converting an array with concat() Method with various additional inputs.

const myArray = ['one', 'two', 'three'];
let newString  = "123...";
newString = newString.concat(myArray);
console.log(newString); // "123...one,two,three"

newString  = "123...";
newString = newString.concat('123...', myArray);
console.log(newString); // "123...123...one,two,three"

newString  = "123...";
newString = newString.concat('123...', myArray, '...123');
console.log(newString); // "123...123...one,two,three...123"

JSON.stringify() Method

JSON.stringify() is part of original JSON standard built-in object method in JavaScript.

Its features includes:

• Creates a new JSON string from the pass in array object
• Does not change original data
• Best suitable for array of objects

Below shows the example of converting an array of objects and strings.

const myArray = ['one', 'two', 'three'];
let myString = JSON.stringify(myArray);

console.log(myString);  // ["one","two","three"]

const newArray = [
  { one: 'one' },
  { two: 'two' },
  { three: 'three' },
];
let newString = JSON.stringify(newArray);

console.log(newString);  // [{"one":"one"},{"two":"two"},{"three":"three"}]

Type Coercion Method

Coercion Method is the least common use method but it does exist where the operation will convert a datatype to another. It is similar to type casting as well.

Below shows the example of how we can do conversion with + sign and String() object.

const myArray = ['one', 'two', 'three'];

let myString1 = myArray + '';
let myString2 = String(myArray);
console.log(myString1);  // "one,two,three"
console.log(myString2);  // "one,two,three"

Conclusion

We have look into 5 different methods to convert array.

toString() method is easy to use but it does not allow customisation of separator like join() method. We can also use concat() if there is an existing variable to append the array.

Each method have their own use case. Thus, we will be better to understand all of them to pick the best one.