How to convert a JavaScript array to a string (with examples)?

JavaScript is a scripting language that was initially built to add interactivity to web pages but now it has become the heart of web development. Arrays and strings are one of the most widely used concepts in JavaScript today. This article explains how to convert JavaScript array to stings along with some code examples. In this article, we will also cover what are arrays and strings in brief and how to convert a JavaScript array to string.

Arrays and Strings in JavaScript

Arrays in JavaScript are used to store multiple variables (same or different datatypes) under a single name.

Strings in JavaScript are used to store a character or a series of characters. These characters can either be alphabets, numbers, or even symbols.

Many a time we might come across some situations wherein we need to convert JavaScript arrays to strings. So now let us see how to convert JavaScript arrays to strings.

Convert a JavaScript array to string (Using toString() Method)

To convert a JavaScript array to string we can simply use the toString() method of JavaScript on the given array. This method returns the value inside the given array as a string.

Let us see some examples of the conversion of an array with different data types into strings.

Converting an Array of Numbers into a String in Javascript

Lets us see the code demonstration of converting an array of numbers to strings in JavaScript.

Code Demonstration:

const myArray= [4,7,2,5,6];
console.log(myArray);
const myString=myArray.toString();
console.log(myString);Code language: JavaScript (javascript)

Code Output:

[4, 7, 2, 5, 6]
4,7,2,5,6Code language: JavaScript (javascript)

As we can see on console logging myArray we got the output with square brackets (i.e. an array) but on console logging myString (i.e. after using the toString() method on myArray) we saw that the square brackets ([]) got removed i.e. got string as an output. This means using the toString() method on myArray converted the array to a string.

Converting an Array of Strings into Strings in Javascript

Lets us see the code demonstration of converting an array of strings to strings in JavaScript.

Code Demonstration:

const myArray= ['HTML','CSS','JavaScript'];
console.log(myArray);
const myString=myArray.toString();
console.log(myString);Code language: JavaScript (javascript)

Code Output:

['HTML', 'CSS', 'JavaScript']
HTML,CSS,JavaScriptCode language: JavaScript (javascript)

As we can see on console logging myArray we got the output with square brackets (i.e. an array) but on console logging myString (i.e. after using the toString() method on the array) we saw that the square brackets ([]) got removed i.e. got string as an output. This means using the toString() method on myArray converted the array to a string.

Converting Mix Arrays (both numbers and string) into Strings in Javascript

Lets us see the code demonstration of converting an array containing both strings and numbers to strings in JavaScript.

Code Demonstration:

const myArray= ['HTML','CSS',4,8];
console.log(myArray);
const myString=myArray.toString();
console.log(myString);Code language: JavaScript (javascript)

Code Output:

['HTML', 'CSS', 4, 8]
HTML,CSS,4,8Code language: JavaScript (javascript)

As we can see on console logging myArray we got the output with square brackets (i.e. an array) but on console logging myString (i.e. after using the toString() method on the array) we saw that the square brackets ([]) got removed i.e. got string as an output. This means using the toString() method on myArray converted the array to a string.

Converting a String Back to the Array In Javascript

In all the above code examples we saw that the output string consists of all the elements of the array separated by commas (,). So, if we simply combine all the elements we can get our desired output.

The easiest way to achieve this is by using the split() method in JavaScript. This method is used to split a string into an array of substrings and returns a new array. The parameter accepted by this method is used to split the string. For example, if we pass an empty space (” “) as a parameter to the split method then this method splits the string between the words.

In the above code example if we pass a comma (“,”) as a parameter then we will get our desired array.

Let us see a code example to understand better.

Code Demonstration:

const myArray= ['HTML','CSS',4,8];
console.log(myArray);
const myString=myArray.toString();
console.log(myString);
const newArray= myString.split(",");
console.log(newArray);Code language: JavaScript (javascript)

Code Output:

['HTML', 'CSS', 4, 8]
HTML,CSS,4,8
['HTML', 'CSS', '4', '8']Code language: JavaScript (javascript)

As we can see from the above code output the slipt method converted all the values into strings and combined all of them in an array.

Note: This method always converts all the values into strings. Note that initially in myArray, 4 and 8 were integers. After converting all the elements of myArray to string and then back to an array (newArray), the integers 4 and 8 got converted to strings.

Working with Nested Arrays

As discussed before an array can hold any type of value inside it. You might come across situations where you want to store an array inside an array. An array placed inside an array is called a nested array. Are you wondering how to convert such an array to a string? Don’t worry we have got you covered.

Nested arrays in JavaScript are handled in a different manner. Using the toString() method on an array flattens the array object. A flattened array consists of all the elements present in the initial (original) array along with all the elements of the nested array too as a single array. Then the toString() method separates all the elements with a comma.

Let us see a code example to understand this concept.

Code Demonstration:

const myNestedArray= ['Codedamn', 32.5, ['JavaScript', 12], '8'];
const myString=myNestedArray.toString();
console.log(myString);Code language: JavaScript (javascript)

Code Output:

Codedamn,32.5,JavaScript,12,8Code language: JavaScript (javascript)

As we can see from the above code output because of the toString() method the array gets flattened and thus all the elements of the array (elements of the nested array as well) get combined as strings.

Converting a Nested Array of Objects into a String

Now you might be thinking what would happen if we had an object inside an array? In this case, the toString() method works in a little different way.

Let us understand this with an example of an array with a nested object.

Code Demonstration:

const myNestedArray= ['Codedamn', 32.5, {course:'JavaScript', rating:5}, '8'];
const myString=myNestedArray.toString();
console.log(myString);Code language: JavaScript (javascript)

Code Output:

Codedamn,32.5,[object Object],8Code language: JavaScript (javascript)

Don’t you think that the output looks quite weird? Well, this is what happens in an array with nested objects. The resultant string value in such a case contains [object Object].

This happened because of the type of underlying objects. Even though an array is also of the type Object but when we use the toString() method with it, then it delivers meaningful data whereas the plain/normal object like the one included in the above array does not show this behavior by default thus we get [object Object] in our resultant string.

Conclusion

In this article, we saw various how to convert arrays with different types of elements to strings using the toString() method and to convert the strings back to an array using the split() method.

Hope you found this article helpful.