Convert Array to String in JavaScript
The arrays are the most common and flexible data structures you might use in your day-to-day programming life. Since you have tons of array methods to your disposal provided by the JavaScript programming language, it makes it easy for you to manipulate the arrays and perform whatever operations you want to perform.
Similarly, converting an array into a string can also be done easily with the help of predefined methods and by following some other ways. In this article, we will see the different ways in which we can convert the entire array data structure (i.e., all the elements present inside that array) into a single string.
Use the toString() Method to Convert Array to String in JavaScript
The easiest way of converting an array into a string is by using a predefined method in JavaScript called toString() . This method does not just work with arrays but also with various other data types. Almost anything can be converted into a string using toString() .
You can add this at the end of the array to use this method, as shown below. It will take all the elements inside that array and concatenate them as a single string.
Here, if you see the output, it is a string but comma-separated. Now, if you want to remove commas from the above string, you can use the replace() method as follows. The replace() method takes two parameters. The first parameter is the character itself that needs to be replaced (in this case, comma, which is represented by /, ), and the second parameter decides what to replace the character with (in this case, blank space). The / is the escape character.
In this case, we want to remove all the commas from the string, represented by /g .
Join the Elements of the Array Using .join() Method in JavaScript
Another way of converting an array to a string is by using the join() method. This method will take each element from the array and together to form a string. Here, if you directly use this method onto an array similar to that of toString() , it will also generate a string separated by commas.
But here, you don’t need to use any other methods like the replace() because you can directly pass any other separators as a parameter to separate the elements within the string.
Use JSON.stringify() to Convert Array to String in JavaScript
The JSON.stringify() method allows you to convert any JavaScript object or a value into a string. This is cleaner, as it quotes strings inside of the array and handles nested arrays properly. This method can take up to three parameters as follows.
The value parameter takes any value that needs to be converted into a string. This parameter is mandatory to pass. The replacer is a function that you can pass to replace some of the elements inside the string. If you want to add white space to the output string for readability purposes, you can use the space parameter. Both of these parameters, replacer and space , are optional.
In the above example, we definitely want to use a replacer function because the output we got above is not readable. The JSON.stringify() method directly takes individual elements of the array and converts them into the string, including its structure.
Use Type Coercing to Convert Array to String in JavaScript
The last way to convert an array into a string is by using type coercion. The type coercion is a process of converting a value from one type to another. There are two types of coercion in JavaScript, implicit and explicit coercion.
The implicit coercion is when you apply various operators ( + , — , ‘ ‘ , / , and more) to the values of different types, and explicit coercion is when you use a function such as String() , Number() , etc. The example for both the type coercion is as shown below.
str_1 is an example of implicit coercion where we are just using an operator between two different types of values (one is an array, another is a string). The resulting output of this operation is a string. The str_2 is an example of explicit coercion where we have just passed the entire array inside the String() function to convert the array into a string.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
Convert a JavaScript array to string
There will be times when you need to convert an array of values into a single string in JavaScript.
This article will help you learn the easy ways you can convert an array to string in JavaScript:
1. Using the toString() method
To easiest way to convert a JavaScript array to string is to use the built-in Array method called toString() .
This method will return a string that represents the elements stored in your array as follows:
The toString() method is able to convert an array of strings into a single string as well:
2. Convert an array of objects to string with JSON.stringify()
But keep in mind that the toString() method can’t be used to convert an array of objects.
when you call the toString() method on an array of objects, it will return [object Object] instead of the actual values:
To convert an array of objects into a string, you need to use the JSON.stringify method as shown below:
It’s not really a representation of the array values because the return value will still have the square and curly brackets.
Still, this is the best way you can convert an array of objects to a string in JavaScript.
3. Convert JavaScript array to string with join()
Sometimes, you want to convert an array into a string without commas.
Since the toString() method can’t do this, you need to use join() method instead.
The join() method is a built-in method of the Array class used to join array elements as one string.
This method accepts one string parameter which will serve as the separator of the returned output.
Here are some examples of using the join() method to convert an array to a string:
As you can see, you can specify an empty string to get a string without commas.
4. Convert a nested array to a string in JavaScript
You can convert a nested array into a string in JavaScript using the toString() method.
The toString() method will flatten your array so that all elements will be joined as a single string:
As you can see, the child array that contains ["James", "Nathan"] is flattened and put into a single string by the toString() method.
5. Convert a string back into an array
When you need to convert a JavaScript string into an array, you can use a built-in String method called split() .
As the name implies, the split() method is used to split a JavaScript string into an array.
You can pass a separator as an argument of split() to let JavaScript know what character is used to split the string.
See the following code:
As you can see, converting a string into an array is very easy in JavaScript.
If you want to learn more about the split() method, check out my other article on How to split a string into array in JavaScript.
Conclusion
As you can see from the examples in this article, there are multiple ways you can convert a JavaScript array to a string.
It all depends on your needs and preferences. Sometimes you need to convert an array of objects. Other times you might want to use other than a comma as your string separator.
You can also convert a string back to an array using the split() method.
I hope this article was helpful. See you in other articles! ��
Level up your programming skills
I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!
report this ad
About
Sebhastian is a site that makes learning programming easy with its step-by-step, beginner-friendly tutorials.
Learn JavaScript and other programming languages with clear examples.
Search
Type the keyword below and hit enter
report this ad
Click to see all tutorials tagged with:
report this ad
Converting Arrays to Strings in JavaScript
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
Arrays are a powerful feature of any language. They let you house multiple pieces of information easily. They will maintain the order of items being added and can even be sorted. In modern web browsers, they even handle auto-magically converting themselves into human readable strings.
Even with the modern niceties, it’s still good to know how to convert an array to a string for those times when you need to massage an array into another format, or want to do something more than simply comma separating the values (the default behavior).
Getting Started
No special tools required. You can hack along in either your web browser’s console or using the Node.js REPL. The commands utilized are baked into the Array Object’s prototype.
To string, or Not to String.
If you were to run the following in your browser:
You would receive an alert with the message 1,2,3 without any additional work on your part. If all you need to do is display the contents of an array in this format, this can get you pretty far. This even works when referencing array objects inside of template literals.
Under the hood, the array items are being joined together as a string, using the comma , character as the delimiter. It’s the same as running either of the following:
Both result in the same 1,2,3 string.
In fact, that’s all that the .toString() method can do for us. It accepts no parameters so it’s usefulness is fairly limited.
Even though arrays are actually objects in JavaScript, the .toString() method for an array overrides the object’s .toString() method, that’s why we don’t end up with the pesky and way less useful [object Object] string.
Join Together
While it’s default behavior (without any passed parameters) is the same as .toString() , the .join() method is significantly more robust.
Let’s say you wanted to include a space after the comma when creating your string, you can tell .join() the exact string to use:
Prefer to have each array item on it’s own line? Pass in a new line character:
Working with HTML and want to use those breaks instead?
Want HTML breaks AND new lines. Okay, you get the idea.
The .join() method accepts an optional parameter that lets you define the separator character or characters you’d like to use to join the array items together.
Speaking of HTML
One of my favorite .join() tricks, before template literals and JSX made it extremely easy to work with multiple line blocks of markup, was to use .join() to assemble an array of HTML tags into a string:
Passing in an empty string to .join() simply joins the array items without any additional characters.
Still pretty handy for dealing with multiple line strings and/or markup when you don’t have access to some of the more modern syntax options.
Conclusion
Even if all you’re trying to do is display a comma separated list of array items to a user, you can still benefit from using the .join() method. It gives you more control over the output which will make things easier to read for your users.
Working with a back-end server that doesn’t understand arrays being passed-in? Join your array items into a single value and you’re good to go!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Converting an Array to string in JavaScript
Sometimes required to convert an Array to string format for displaying on the page, send to AJAX request, or further processing.
Mainly it is done by traversing on the Array and concat value to a variable with a separator for string conversion.
This can easily be done with the JavaScript inbuilt method.
Contents
1. Loop
Traverse through an Array until the variable value is less than Array length and concatenate array value to a string variable.
Example
Output
2. toString()
This converts an Array to string and returns a comma-separated value.
Note – Its default separator is the comma(,) and it doesn’t allow to specify separator.
Syntax –
Example
Output
3. join()
It also converts an Array to String and allows to specify separator. Its default separator is the comma(,).
Syntax –
Example
Output
4. Conclusion
I showed how you can convert an Array to string with Loop and inbuilt JavaScript methods. You can use the inbuilt methods for one-line conversion.