Tutorial

Converting Arrays to Strings in JavaScript

Published on December 5, 2019
Default avatar

By joshtronic

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:

alert([1, 2, 3]);

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:

[1, 2, 3].toString();
[1, 2, 3].join();

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:

[1, 2, 3].join(', ');

Prefer to have each array item on it’s own line? Pass in a new line character:

[1, 2, 3].join('\n');

Working with HTML and want to use those breaks instead?

[1, 2, 3].join('<br>');

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:

[
  '<table>',
    '<thead>',
      '<tr>',
        '<th>Name</th>',
        '<th>Level</th>',
      '</tr>',
    '</thead>',
    '<tbody>',
      '<tr>',
        '<td>Alligator</td>',
        '<td>9001</td>',
      '</tr>',
    '</tbody>',
  '</table>',
].join('');

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.

Learn more about us


About the authors
Default avatar
joshtronic

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel