Array to String in JavaScript

JavaScript’s toString() method operates on a given object, returning its text representation as a string.

Applying the toString() method to an array returns the values in the array as a string.

Converting an Array to a String

Let’s look at three examples of converting an array to a string:

Converting an array of numbers

const numArray = [6, 5, 4];
numArray.toString();  // expected output: 6,5,4

As we can see above, each element is converted to a string, separated with commas, then returned to the user as a single string.

Note: the square brackets we used to define the array are gone! JavaScript removes them when it stringifies the content.

Converting an array of strings

const strArray= ['a', 'b', 'c'];
strArray.toString();  // expected output: a,b,c

The above code concatenates all of the strings in the array together into a single comma-delimited string, representing the values in the array.

Converting mix arrays (both numbers and strings)

const mixArray = ['5', 32, 'Daniel'];
mixArray.toString(); // expected output: 5,32,Daniel

This code takes a mixed array and returns the comma-delimited string representation, converting each data type in turn into a string.

Converting a String back to an Array

In the above code samples, the returned strings have all of the array values separated by commas. We can use the split() method to recreate the array. Simply pass the “,” character as an argument to the split() method, and JavaScript will create an array based on the contents:

const str = mixArray.toString();
const backToArr = str.split(',');
console.log('backToArr: ', backToArr);
// expected output: ["5", "32", "Daniel"]

The above code takes our comma-delimited string from the last example (“5,32,Daniel”), and converts it back into an array.

Note: This method will always yield a string as the data type. In the original example, const mixArray contained the value 32 as an integer. After converting this array to a string and back, the value “32” now has a type string. Keep this in mind when working with your arrays – JavaScript can’t always tell what an object’s type is supposed to be when looking at string representations.

If we do not pass a delimiter character to the split() method, the method will return a single value – the string that was provided as input. See the behavior in the code example below:

const str = mixArray.toString();
const backToArr = str.split();
console.log('backToArr: ', backToArr);
// expected output: backToArr: ["5,32,Daniel"]

You can see some more examples where the split() method is applied here.

Working with Nested Arrays

Nested arrays are handled in an interesting way in JavaScript. Take the following example code, which includes an array with nested array elements:

const arrInArr = [ '5', 32, [ 'Daniel', 4 ] ];
arrInArr.toString(); // expected output: 5,32,Daniel,4

When toString() is called on the array, the array object is flattened. Flattened arrays consist of an array that contains all of the elements of the original array, coupled with all of the elements of the nested array, combined to appear as a single array. The toString() method then simply separates all elements with a comma.

This behavior changes when working with objects. If we have an array that has a nested object, as defined in the following example, the resulting string value will contain [object Object]:

const objInArr = ['5', 32, { name: 'Ariel', age: 40 } ];
objInArr.toString() ;  // expected output: 5,32,[object Object]

This happens because of the underlying object types. Although array is of type Object, it has the capability to produce a meaningful result when applying the toString() method. Plain objects, like the one included in our array above, do not have this behavior by default – we would need to add it in ourselves.

To learn more about the toString() method and its behavior with objects, check out this link.

Related Links:

JavaScript – How to Use parseInt()

JavaScript – How to Use JSON.stringify

JavaScript – How to Get an Object’s Keys and Values