Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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. Converting an array into a JavaScript String can be done using several predefined methods and techniques.
Using the toString() Method
Using the join() Method
Using JSON.stringify() Method
Using Type Coercion
Using the toString() Method
The toString() method is a built-in JavaScript function that converts array elements into a comma-separated string. It's the simplest way to convert an array to string format.
Syntax
array.toString();
Example
The following example demonstrates how to use the toString() method to convert an array into a 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>
car,bike,train,bus 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
The array.join() method combines an array's elements into a string with a specified separator. This method provides more control over the output format compared to toString().
Syntax
array.join() array.join(separator);
Parameters
separator ? Optional string used to divide each pair of adjacent array elements. Default is comma (,).
Example
In this example, we use the array.join() method to merge all elements with a space separator.
<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>
Hello world welcome to Tutorials Point string
Using the JSON.stringify() Method
The JSON.stringify() method converts JavaScript objects and arrays into JSON string format. Unlike other methods, it preserves the array structure with square brackets.
Syntax
JSON.stringify(value);
Parameters
value ? The array or object to convert into a JSON string.
Example
This example shows how JSON.stringify() converts an array while maintaining its structure.
<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>
["Hello","world","welcome","Here"] string
Using Type Coercion
JavaScript uses Type Coercion to automatically convert values between different data types. Both explicit and implicit coercion can convert arrays to strings.
Syntax
let string = String(array); // explicit coercion let string = "" + array; // implicit coercion
Example
This example demonstrates both explicit and implicit type coercion methods.
<html>
<body>
<h2>Convert an array into JavaScript String</h2>
<h4>Using <i>type coercion</i> methods to convert array into string</h4>
<p>Explicit coercion: <span id="string1"></span></p>
<p>Type: <span id="result1"></span></p>
<p>Implicit coercion: <span id="string2"></span></p>
<p>Type: <span id="result2"></span></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>
Explicit coercion: car,bike,train,bus Type: string Implicit coercion: car,bike,train,bus Type: string
Comparison
| Method | Output Format | Customizable Separator | Best Use Case |
|---|---|---|---|
toString() |
Comma-separated | No | Simple conversion |
join() |
Custom separator | Yes | Formatted output |
JSON.stringify() |
JSON format with brackets | No | Data transmission |
| Type Coercion | Comma-separated | No | Quick conversion |
Conclusion
JavaScript offers multiple methods to convert arrays into strings. Use join() for custom formatting, JSON.stringify() for data transmission, and toString() for simple comma-separated output. Choose the method that best fits your specific requirements.
8K+ Views
