Converting JavaScript Arrays to Strings
The join
method converts the elements of an array to strings, concatenates them, and returns the resulting string. If you don't pass an argument to the join
method, a comma will be placed between the values in the resulting string, as shown here:
var ar = ['Rudi', 'Morie', 'Halo', 'Miki'];
var str = ar.join(); // Rudi,Morie,Halo,Miki
You can supply a separator as an argument to the join
method. In the example below, we pass a comma and space as separator:
var ar = ['Rudi', 'Morie', 'Halo', 'Miki'];
console.log( ar.join(', ') ); // Rudi, Morie, Halo, Miki
You can include an empty string separator if you do not want any separation between the array element values in the resulting string. The following demonstrates this, along with a few other separator choices:
var ar = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
console.log( ar.join('') ); // abcdefg
console.log( ar.join(' : ') ); // a : b : c : d : e : f : g
console.log( ar.join('-') ); // a-b-c-d-e-f-g
console.log( ar.join('|') ); // a|b|c|d|e|f|g
Invoking the join
method on an array does not modify the array. It returns a string consisting of the array values concatenated.
Converting Other Data Types to Strings
In the examples above, the arrays contained only string values, but arrays can contain a variety of data types. How those types are converted to strings varies with data type.[1] The following example demonstrates applying the join
method to an array containing a variety of primitive data types:
var ar2 = ['Hi', 7, 0, true, false, null, undefined, 3.14];
console.log( ar2.join(', ') ); // Hi, 7, 0, true, false, , , 3.14
Notice in the result that the string, numbers, and booleans display as expected while null
and undefined
are converted to empty strings.
Convert an Array with Sub-Arrays to a String
Next let's apply the join
method to an array whose elements are themselves arrays:
var ar3 = [
['apple', 'orange', 'pear'],
['carrots', 'beans', 'peas'],
['cookies', 'cake', 'muffins', 'pie']
];
console.log( ar3.join(', ') );
// apple,orange,pear, carrots,beans,peas, cookies,cake,muffins,pie
Notice that even though we passed a comma and space separator to the join
method, the elements of the sub-arrays are separated only with a comma. This occurs because the join
method only applies to the outer array; it is not recursive. The sub-arrays are handled by the array object's toString
method[2] which produces the same result as the join
method with the default separator.
While we could use a for
loop to apply the join
method to sub-arrays, we can more conveniently use the flat
method provided by a recent update to the JavaScript language. We can then apply the join
method to its result:
let foods = [
['apple', 'orange', 'pear'],
['carrots', 'beans', 'peas'],
['cookies', 'cake', 'muffins', 'pie']
];
// flatten array, then join
console.log( foods.flat().join(', ') );
// apple, orange, pear, carrots, beans, peas, cookies, cake, muffins, pie
Represent an Array of Objects as a String
If your array consists of object literals, the reduce method can be used to generate a string reflecting their values.
- JavaScript is a loosely-typed language and will convert from one type to another when necessary. ^
- All objects in JavaScript have a
toString
method available for converting their values to strings. It may be thetoString
method inherited from the generic Object, or it may be specific to the particular type of object. For example, array objects, date objects, regular expression objects, and function objects each have their owntoString
method. ^