Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
7K+ Views
