Updated September 1, 2023
Table of Contents
- Introduction to jQuery join()
- How does jQuery join() work?
- Examples of jQuery join()
- Conclusion
- FAQs
Introduction to jQuery join()
The jQuery join() method converts and returns the elements of an array into a string. The jQuery join() method is a built-in method in jQuery. Sometimes, we need to join all the elements of an array into a single string itself, so jQuery provides the join() method for this purpose. While joining the elements, each element will be separated by some separator, and comma (“,”) is the default separator. Note that the join() method does not change the original array; it just returns the converted array, which we can store into another variable.
Syntax
array.join(separator);Parameters
separator: You can use this optional parameter of type string to specify the character or string for joining the elements of an array.
Return Value
The return value of this method is a string of joined array elements with separated by the passed separator.
How does jQuery join() work?
- The join() method applies to the array object and accepts one separator parameter.
- Suppose an array contains four elements, and we call the join() method on it and pass space as a separator. The join() method combines all four elements by using space as the separator and returns as a string.
- If we check the original array, it will not change because the join does not change to the original array; it just returns a string.
Examples of jQuery join()
Below are the different examples as follows:
Example #1 – Join array elements
Next, we write the html code of the jQuery join() method more clearly with the following example, where the join() method is used to join a string array elements without any separator.
Code
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery join method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("#id1").click(function() {
var fruits = ["Kiwi", "Cherry", "Apricot", "Mulberry", "Cherry"];
$("h3").text(fruits );
});
$("#id2").click(function() {
var fruits = ["Kiwi", "Cherry", "Apricot", "Mulberry", "Cherry"];
var jfruits = fruits.join();
$("div").text(jfruits );
});
});
</script>
</head>
<body>
<p> Example for join() method. </p>
<button id = "id1" >Click this button to see all the elements of an array.</button>
<h3> </h3>
<button id = "id2" >Click this button to join all the elements of an array.</button>
<div></div>
</body>
</html>Output
Once we click on the “Click this button to see all the elements of an array.” Button, the output is:
And once we click on the “Click this button to join all the elements of an array.” Button, the output is:
As in the above program, the array of fruits is created, which gets print by clicking the first button through calling the function. Next, if we click the second button, it calls the function; this function creates the same array, which is then joined and printing, as we can see in the output. If we observe the output, both the array is printing the same because the array element joins by default using “,”, so the join() method also joins all the elements by default by the “,” separator if we do not pass any separator.
Example #2 – Join array elements with a specified separator
Next, we write the html code of the jQuery join() method, where the join() method is used to join string array elements with “@” as a separator between the elements.
Code
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery join method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$( "#id1" ).click(function() {
var fruits = [ "Apple", "Banana", "Orange", "Mango", "Cherry" ];
$( "#h1" ).text(fruits );
var jfruits = fruits.join( "@" );
$( "div" ).text( jfruits );
$( "#h2" ).text( fruits );
});
});
</script>
</head>
<body>
<p> Example for join() method with separator. </p>
<p> Click below button to see all the elements of an array and join them. </p>
<button id = "id1" >Click me</button>
<p> The original array before join is : </p>
<h3 id = "h1"> </h3>
<p> The new joined array is : </p>
<div> </div>
<p> The original array after join is : </p>
<h3 id = "h2"> </h3>
</body>
</html>Output
Once we click on the “Click me” button, the output is:
As in the above program, if we click the “Click me” button, it calls to the function; in this function, it creates the string array, which is then joined by the “@” separator and printing, as we can see in the output. If we observe the output, the array (array before and after join) prints the same because the join method does not alter the original array.
Example #3 – Join number array elements with a specified separator
Next, we write the html code of the jQuery join() method, where the join() method is used to join a number array of elements with “and” as a separator between the number of elements.
Code
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery join method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$( "#id1" ).click(function() {
var no = [ 14, 20, 34, 43, 51, 60 ];
document.write( "The original array is :" );
document.write( no );
document.write( "<br>" );
document.write( "The joined original array is :" );
document.write( no.join(" and ") );
});
});
</script>
</head>
<body>
<p> Example for join() method on number array. </p>
<p> Click below button to see all the elements of an array and join them. </p>
<button id = "id1" >Click me</button>
</body>
</html>Output
Once we click on the “Click me” button, the output is:
As in the above program, clicking the “Click me” button calls to the function. This function generates an array of numbers, joins them using the separator “and,” and then prints the result, as evident from the output.
Conclusion
In conclusion, the jQuery join() method is valuable for converting and concatenating array elements into a single string. Users can specify a custom separator or use the default comma separator. The join() method doesn’t modify the original array, ensuring data integrity. The examples show how it can be applied to different arrays, including strings and numbers, making it a versatile solution for joining and formatting data within web applications.
FAQs
Q1. How to use the join function in jQuery?
Ans: First, use the jQuery join() function to create an array of elements you want to join. Then, call the join() method on the array, passing an optional separator as an argument. This method will return a string containing the array elements joined by the specified separator. If you don’t specify a separator, it defaults to a comma. The original array remains unchanged. This function converts and formats array data into a single string in jQuery.
Q2. What is join () in JavaScript?
Ans: When working with JavaScript arrays, you can use the join() method to merge all the elements into a single string. This method proves useful in displaying array data as a complete string, with the option of including a specified separator between the elements. If you do not provide a separator, the method will use a comma by default. The original array will not change, enabling you to format and display the data without altering the primary content.
Q3. How does join () work?
Ans: The join() method in jQuery works by converting the elements of an array into a single string, separated by a specified delimiter. It operates on an array and takes a separator as an optional parameter. When called, it concatenates the array elements, placing the separator between them. If no separator is provided, it defaults to using a comma. The original array remains unchanged, and the result is a string containing the joined elements, ready for use in various web development scenarios.
Q4. What does join () return?
Ans: The join() method in jQuery returns a string that represents the elements of an array concatenated together with a specified separator. This string contains all the array elements separated by the chosen separator, making it suitable for creating formatted strings or displaying array data as a cohesive string. The method uses a comma (“,”) as the default separator if no separator is specified. It’s important to note that join() doesn’t modify the original array; it solely returns the resulting string.
Recommended Articles
We hope that this EDUCBA information on “jQuery join()” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
