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 concatenate multiple string variables in JavaScript?
In this tutorial, we will learn to concatenate multiple string variables in JavaScript. String concatenation is the process of merging two or more strings into a single string. This operation is fundamental in JavaScript development and is commonly used for creating dynamic content, building messages, and manipulating text data.
String concatenation is particularly useful when you need to insert substrings into existing strings or build complex strings from multiple variables. For example, when developing applications, you might need to combine user input with predefined text or merge data from different sources.
There are three main methods to concatenate strings in JavaScript:
Using the + operator or template literals (`${})
Using the String concat() method
Using the Array join() method
Using the + Operator
The + operator is the most common and straightforward method to concatenate strings. When used with string operands, it merges them together to create a new string.
Syntax
let result = string1 + string2 + string3;
Example
<html>
<head>
</head>
<body>
<h2>Concatenate multiple string variables in JavaScript</h2>
<h4>Concatenating "Welcome ", "To ", "The ", "TutorialsPoint" using the + operator</h4>
<div id="string1"></div>
</body>
<script>
var string1 = document.getElementById("string1");
let str1 = "Welcome ";
let str2 = "To ";
let str3 = "The ";
let finalString = str1 + str2 + str3 + "TutorialsPoint";
string1.innerHTML = finalString;
</script>
</html>
Welcome To The TutorialsPoint
Using Template Literals
Template literals provide a more readable way to concatenate strings using backticks (`) and ${} syntax for variable interpolation.
Example
<html>
<head>
</head>
<body>
<h4>Concatenating strings using template literals</h4>
<div id="string2"></div>
</body>
<script>
var string2 = document.getElementById("string2");
let str1 = "Hello ";
let str2 = "Programmers!";
string2.innerHTML = `${str1}${str2}`;
</script>
</html>
Hello Programmers!
Using the String concat() Method
The concat() method is a built-in JavaScript string method that merges multiple strings. It returns a new string without modifying the original strings.
Syntax
string1.concat(string2, string3, string4);
Parameters
string1 ? The base string to concatenate with
string2, string3, ... ? Additional strings to concatenate
Example
<html>
<head>
</head>
<body>
<h2>Concatenate multiple string variables in JavaScript</h2>
<h4>Using the concat() method to merge strings</h4>
<div id="string1"></div>
</body>
<script>
var string1 = document.getElementById("string1");
let str1 = "TutorialsPoint ";
let str2 = "is a ";
let str3 = "computer science portal";
let resultantString = str1.concat(str2, str3);
string1.innerHTML = resultantString;
</script>
</html>
TutorialsPoint is a computer science portal
Using the Array join() Method
The Array.join() method concatenates all array elements into a single string. This approach is useful when you have multiple strings stored in an array.
Syntax
let strArray = [string1, string2, string3]; let result = strArray.join(separator);
Example
<html>
<head>
</head>
<body>
<h2>Concatenate multiple string variables in JavaScript</h2>
<h4>Using array.join() method to concatenate ["abc", "def", "ghi"]</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>
abc def ghi
Comparison of Methods
| Method | Performance | Readability | Best Use Case |
|---|---|---|---|
| + operator | Fast | Good | Simple concatenation |
| Template literals | Fast | Excellent | Complex strings with variables |
| concat() method | Moderate | Good | Functional programming style |
| Array join() | Good | Good | Multiple strings from arrays |
Conclusion
JavaScript offers multiple ways to concatenate strings, each suitable for different scenarios. The + operator and template literals are most commonly used for their simplicity and performance, while concat() and join() methods provide functional approaches for specific use cases.
19K+ Views
