How to convert an array into JavaScript string?



An array is the most popular and adaptable data structure you might employ in your regular programming. Predefined methods and a few more techniques make converting an array into a string simple. The process of converting an array into a JavaScript String can be done in several methods, and in this article, we will be looking at them.

  • Using the toString() Method

  • Using the join() Method

  • Using JSON.stringify() Method

  • Using the Type Coercion

Using the toString() Method

There is an internal function toString(). It is a built-in JavaScript method that can be applied to any JavaScript variable. The toString() allows you to turn almost anything into a string.

Syntax

We can follow the below syntax for the array.toString() method.

array.toString();

Example

With the help of the example below users will be able to understand how to use the toString() method to convert an array into JavaScript string.

<html> <body> <h2> Convert an array into JavaScript String. </h2> <h4>Using the <i> array.toString() </i> method to convert array to string.</h4> <div id = "string"> </div> <p id = "result"> </p> </body> <script> const vehicles = ["car", "bike", "train", "bus"]; let data = vehicles.toString(); document.getElementById("string").innerHTML = data; document.getElementById("result").innerHTML = typeof data; </script> </html>

If We look at the output, in this case, we can see how every element of the array was concatenated to a single JavaScript String.

Note − Remember that an array of objects cannot be used with the toString() method since it will return [object Object] rather than the actual values. Use the JSON.stringify function to turn an array of objects into a string.

Using the join() Method

To combine an array's items into a string, we use the array.join() method. You might occasionally need to remove the commas from your array before turning it into a string, this can be achieved by using the .join() method but for that, we need to pass in an empty string as the parameter.

If only one element exists in the array, the separator will not be used when returning the element.

Syntax

We can follow the below syntax for the array.join() method.

array.join()
array.join( separator );

Parameter

  • Separator − This parameter specifies a string to be used to divide up each pair of adjacent array members. It is optional, meaning that it may or may not be used as a parameter but the comma is the default value (,) of the parameter.

Example

In the below example, we have used the array.join() method to merge all elements of the array into a single string.

<html> <body> <h2>Convert an array into JavaScript String. </h2> <h4>Using the <i> array.join() </i> method to convert array to string.</h4> <div id = "string"> </div> <p id = "result"> </p> </body> <script> const array = ["Hello", "world", "welcome", "to", "Tutorials", "Point."]; let data = array.join(' '); document.getElementById("string").innerHTML = data; document.getElementById("result").innerHTML = typeof data; </script> </html>

Using the JSON.stringify() Method

The JSON.stringify() method is mainly used to convert a JavaScript object into a string when the data is sent to the server, as the data needs to be a string. So, we can use this method to our advantage and can also stringify JavaScript arrays, thus converting the elements of the array to a string.

Syntax

Following is the syntax to convert an array to a JavaScript string using JSON.stringify() method.

JSON.stringify( value );

Parameters

  • Value − The value or array that needs to become a JSON string.

Example

In the below example, we will convert the elements of the array to a string using the JSON.stringify() method. It returns the whole object or array including the brackets by converting it into the object.

<html> <body> <h2> Convert an array into JavaScript String. </h2> <h4>Using the <i> JSON.stringify() </i> method to convert array to string.</h4> <div id = "string"> </div> <p id = "result"> </p> </body> <script> const array = ["Hello", "world", "welcome", "Here."]; let data = JSON.stringify( array ); document.getElementById("string").innerHTML = data; document.getElementById("result").innerHTML = typeof data; </script> </html>

Using the Type Coercion

JavaScript uses a technique called Type Coercion to change a value's data type. Explicit and Implicit coercion are the two types of coercion that JavaScript supports. A value is converted from one type to another through the type coercion procedure.

Syntax

Following is the syntax to convert an array to JavaScript String by the type coercion.

let string = String( array ); //explicit coercion
let string = " " + array //implicit coercion

Example

In the below example, we will convert the elements of the array to a string using implicit and explicit coercion, two types of coercion supported by JavaScript.

<html> <body> <h2> Convert an array into JavaScript String. </h2> <h4> Using the <i> type coercion </i> method to convert array into string. </h4> <p id = "string1"> </p> <p id = "result1"> </p> <p id = "string2"> </p> <p id = "result2"> </p> </body> <script> const vehicles = ["car", "bike", "train", "bus"]; var str1 = String(vehicles); document.getElementById("string1").innerHTML = str1; document.getElementById("result1").innerHTML = typeof str1; var str2 = " " + vehicles; document.getElementById("string2").innerHTML = str2; document.getElementById("result2").innerHTML = typeof str2; </script> </html>

In the above output, users can see how implicit and explicit coercion was used. Choose the "String()" method if you wish to explicitly convert an array to a string; otherwise, you can use the "+" operator to do it implicitly.

In this article, we have used the four most common and efficient ways to convert an array into a String using vanilla JavaScript. All the methods work just fine but should be used according to the user's needs.


Advertisements