Convert an array to a string in JavaScript (join, toString, JSON)

When you have a requirement to convert array to string in JavaScript—whether for logs, CSV-style text, or network payloads—you usually mean one of three things: a delimiter-separated line (javascript array to string / js array to string), a JSON snapshot (javascript convert array to string for APIs), or custom formatting (how to convert an array to string in javascript with your own layout).

Tested on: Node.js v20.18.2. After each runnable block, a short note describes what you should see in the console.

1. Array.prototype.join() (recommended)

join() builds one string from every element, separated by an optional separator. If separator is omitted, the default is a comma—the same default toString() uses internally.

const colors = ["red", "green", "blue"];

console.log(colors.join());
console.log(colors.join("; "));

You should see red,green,blue on the first line and red; green; blue on the second (note the space after the semicolon in the separator).

2. Array.prototype.toString() and String(array)

toString() on arrays is specified to behave like join() with no separator argument, so [1, 2, 3].toString() and [1, 2, 3].join() match. String(arr) ends up calling the same string-coercion path for ordinary arrays.

const colors = ["red", "green", "blue"];

console.log(colors.toString());
console.log(String(colors));

Both lines should print red,green,blue—same comma-separated form as join() with no argument.

3. JSON.stringify() (structure-preserving text)

Use JSON.stringify when you need a JSON text form (nested arrays/objects, string quoting), not just delimiter joining.

const colors = ["red", "green", "blue"];
const colorsString = JSON.stringify(colors);

console.log(colorsString);
console.log(typeof colorsString);

You should see a JSON array string with quoted elements, then string as the type of that value.

4. toLocaleString() (locale-aware numbers)

For numbers, toLocaleString can add grouping and locale rules—different from plain join.

console.log([1000, 2000].toLocaleString("en-US"));

With en-US, each number is grouped with commas and the two are joined by another comma (so the line looks like 1,000,2,000).

5. map + join (typed formatting)

A common array to string js pattern is map first, then join, for example turning numbers into strings before joining.

console.log([1, 2, 3].map(String).join("-"));

You should see 1-2-3.

6. Manual loop with forEach

When you need full control (prefixes, newlines, conditional separators), build a string in a loop.

const colors = ["red", "green", "blue"];
let colorsString = "";
let another = "";

colors.forEach(function (color, index) {
  colorsString += index + 1 + ". " + color + " ";
});

colors.forEach(function (color, index) {
  another += index + 1 + ". " + color + "\n";
});

console.log(colorsString);
console.log(another);

The first console.log is one line of numbered colors separated by spaces; the second prints four lines (1. red through 3. blue plus a trailing blank line from the final \n).

7. reduce() with a delimiter

reduce folds the array into one value—here, a single string with a custom separator (trim the trailing dash if you add one every iteration).

const colors = ["red", "green", "blue"];
let colorsString = colors.reduce(function (accumulator, color) {
  return accumulator + color + "-";
}, "");

colorsString = colorsString.substring(0, colorsString.length - 1);
console.log(colorsString);

After trimming the trailing hyphen, you should see red-green-blue.

Pitfalls (objects, holes, BigInt, JSON)

join / toString call ToString on each element. Plain objects become [object Object], while null and undefined become empty segments (extra commas).

console.log([{ a: 1 }].join());
console.log([null, undefined].join());

The object becomes [object Object]; null and undefined become empty strings, so the second line is a lone comma between two empty segments.

Nested arrays stringify inner levels with their own commas, which can look “flattened” at a glance:

console.log([[1, 2], [3, 4]].join());

Nested arrays flatten visually to something like 1,2,3,4 because each inner array is stringified with its own commas before the outer join.

JSON.stringify throws on BigInt elements unless you supply a custom replacer:

try {
  JSON.stringify([1n, 2n]);
} catch (e) {
  console.log(e.name);
}

The catch branch runs and logs TypeError.

Summary

References

• MDN: Array.prototype.join()
• MDN: Array.prototype.toString()
• MDN: JSON.stringify()
• MDN: Array.prototype.reduce()
• MDN: Array.prototype.toLocaleString()