Javascript Array to String

Published on | by
Reza Baharvand
Updated on
Image for Javascript Array to String

Learn how to convert an Array to string, separated with or without commas by using join(), JSON.stringify() and toString() methods.

Description

Arrays in Javascript don't have a type of their own. However, arrays are list-like objects. Setting or accessing items in the array can be done by using integers as element indexes.

let fruits = ["🍏 apple", "🍌 banana", "πŸ‰ watermelon", "πŸ₯­ mango"]; console.log(fruits[0]); // 🍏 apple

Convert Javascript Array to String using toString() method

Let's say we want to convert the whole fruits array to string. If we don't mind the annoying commas, we can use the toString() method.

let fruits = ["🍏 apple", "🍌 banana", "πŸ‰ watermelon", "πŸ₯­ mango"]; let fruitsToString = fruits.toString(); console.log(fruitsToString); // "🍏 apple,🍌 banana,πŸ‰ watermelon,πŸ₯­ mango"

Well, maybe that is what you are looking for. But, what if you have objects in your array? Let's take a look:

let fruitsObj = [ { name: "🍏 apple" }, { name: "🍌 banana" }, { name: "πŸ‰ watermelon" }, { name: "πŸ₯­ mango" }, ]; let fruitsToString = fruitsObj.toString(); console.log(fruitsToString); // "[object Object],[object Object],[object Object],[object Object]"

We can't use the toString() method here, but we can use the JSON.stringify() method instead.

let fruitsObj = [ { name: "🍏 apple" }, { name: "🍌 banana" }, { name: "πŸ‰ watermelon" }, { name: "πŸ₯­ mango" }, ]; let fruitsToString = JSON.stringify(fruitsObj); console.log(fruitsToString); // "[{'name':'🍏 apple'},{'name':'🍌 banana'},{'name':'πŸ‰ watermelon'},{'name':'πŸ₯­ mango'}]"

Convert Javascript Array to String using join() method

The join() method creates and returns a new string by concatenating all the elements in the array. By default, the items are separated by commas. You can use a custom separator if that is what you are looking for.

let fruits = ["🍏 apple", "🍌 banana", "πŸ‰ watermelon", "πŸ₯­ mango"]; console.log(fruits.join()); // "🍏 apple,🍌 banana,πŸ‰ watermelon,πŸ₯­ mango" console.log(fruits.join(" ")); // "🍏 apple 🍌 banana πŸ‰ watermelon πŸ₯­ mango" console.log(fruits.join(" | ")); // "🍏 apple | 🍌 banana | πŸ‰ watermelon | πŸ₯­ mango"

If you want to return a string without any space between the items, you can use join("").

let fruits = ["🍏 apple", "🍌 banana", "πŸ‰ watermelon", "πŸ₯­ mango"]; console.log(fruits.join("")); // "🍏 apple🍌 bananaπŸ‰ watermelonπŸ₯­ mango"

Recent Posts

Image for Coin Flip Simulator With Javascript And CSS Animations

Coin Flip Simulator With Javascript And CSS Animations

In this tutorial, you will learn to build a small app to toss a coin using HTML, CSS, and Javascript. The possible outcomes after flipping a coin are either "Head" or "tail". The probability of getting head or tail is 50%.

Image for Use Math.PI To Calculate Area And Circumference Of A Circle

Use Math.PI To Calculate Area And Circumference Of A Circle

The "Math.PI" property returns the PI "Ο€" constant, approximately equal to 3.14159. For example, you can calculate the circumference and surface area of a circle using "Math.PI".

Image for Check If A Function Exists Before Calling With The typeof Operator

Check If A Function Exists Before Calling With The typeof Operator

If you are sharing scripts from different modules or you have a large codebase, you can use the `typeof` operator to check if a function exists.

Image for Create A Toggle Button In Javascript To Manipulate The DOM With The toggle() Method

Create A Toggle Button In Javascript To Manipulate The DOM With The toggle() Method

The "toggle()" is a method of the "DOMTokenList". It removes something like a "class" name from the list, and returns "false". If the "class" name does not exist, it will add it to the list and return "true".