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 concatenate multiple string variables in JavaScript?
In this tutorial, we will learn to concatenate the multiple string variables in JavaScript. It’s many times needed that we need to concatenate two strings in a single variable and use it. The simple meaning of concatenation is to merge two or multiple strings.
Also, string concatenation is useful to insert some substring in the parent string. For example, while developing the application, as a programmer, you need to update the string by adding some other extra string to it. Users can split the string first and insert the substring using the concatenation operation.
There are various methods to merge the strings; we have explained three methods in this tutorial.
Using the + or $ (template literal) Operators
Using the String concat() Method
Using the Array join() Method
Using the + or $ (template literal) Operators
The easiest method to concatenate two strings is to use the template literals. Generally, programmers use the + operator to add two or more numbers, but when we use the + operator with the string variables, it simply merges the two strings.
Also, users can use the template literal, denoted as $ sign. Users need to use the curly brace with the $ operator
Syntax
Follow the below syntax for the + and $ operator to concatenate the string.
let str1 = "welcome"; let str2 = "To"; let str3 = "The"; let result = str1 + str2 + str3; // using + operator; let result = ` ${str1} ${str2} ` // using $ operator with curly braces
Example
In the below example, we have used the + and $ operator to concatenate the multiple string variables with the normal string.
<html> <head> </head> <body> <h2>Concatenate multiple string variables in JavaScript.</h2> <h4>Concatenating the "Welcome " "To " "The " "TutorialsPoint ", using the <i> + </i> operator.</h4> <div id = "string1"> </div> <h4>Concatenate the strings "Hello " "Programmers! " using the <i> $ </i> operator.</h4> <div id = "string2"> </div> </body> <script> var string1 = document.getElementById("string1"); var string2 = document.getElementById("string2"); let str1 = "Welcome "; let str2 = "To "; let str3 = "The "; let finalString = str1 + str2 + str3 + "TutorialsPoint. "; string1.innerHTML = finalString; str1 = "Hello "; str2 = "Programmers! "; string2.innerHTML = `${str1} ${str2}`; </script> </html>
Using the String concat() Method
The string.concat() method is the built-in JavaScript string library method we can use to merge two or more strings. The concat() method returns the new string after merging the existing string with other strings without affecting the existing string.
It is also simpler to use, and the programmer can follow the syntax below to use the concat() method with multiple strings.
Syntax
string1.concat( string2, string3, string4 );
Parameters
string1 − It is the existing string with which we need to merge the multiple strings.
string2, … − Pass the multiple strings as parameters to merge them with the existing string.
Example
In the below example, we will pass the two strings as a parameter of the concat() method to merge it with the existing third string. It will return a new string that users can observe in the output.
<html> <head> </head> <body> <h2> Concatenate multiple string variables in JavaScript. </h2> <h4> Concatenating the "is a " "computer science portal " with the "TutorialsPoint " string, using the <i> concat() </i> method. </h4> <div id = "string1"> </div> </body> <script> var string1 = document.getElementById("string1"); let str1 = "TutorialPoints "; let str2 = "is a "; let str3 = "computer science portal "; let resultantString = str1.concat(str2, str3); string1.innerHTML = resultantString; </script> </html>
Using the Array join() Method
The Array.join() is also a built-in library method in JavaScript which is useful to concatenate all array values in a single variable. We will create an array of strings, adding the strings in the same order we want to merge.
Syntax
Users can follow the below syntax to use the array.join() method
let strArray = [string1, string2 , string3, … ];
let resultantString = strArray.join(" "); // join strings with space
Example
In the below example, we have used the array.join() method to join all strings of the array. The array.join() method iterates through all strings of the array, merges them one by one into a new string, and returns the new string variable.
<html> <head> </head> <body> <h2> Concatenate multiple string variables in JavaScript. </h2> <h4> Concatenating all strings of array ["abc", "def", "ghi"] , using the <i> array.join() </i> method. </h4> <div id = "string1"> </div> </body> <script> var string1 = document.getElementById("string1"); let strArray = ['abc', 'def', 'ghi']; let resultantString = strArray.join(" "); string1.innerHTML = resultantString; </script> </html>
In the above output, users can see that all array strings are merged with the space character. However, we can change the delimiter character to join the string, and users can pass it as a parameter of the array.join() method.
We learned the three different methods two concatenating the strings. Every method is useful in different scenarios. The first method is used when we need to merge the variables, and the second is useful in the same way. The array.join() method is useful when we need to merge the array of strings.
16K+ Views
