Various string operations can be used to manipulate them for different uses. One of them is Concatenation. In this article, we will learn to concatenate strings together. We will explore different techniques for concatenating strings in JavaScript, including the concat() method. Before that, let’s revise what strings are.
What are Strings in JavaScript?
Strings in JavaScript represent a sequence of multiple characters. ‘C’ represents a single character and “Cat” represents a string. In JavaScript, we can declare a string in two ways. We can declare a string in JavaScript by making a string literal using double quotes.
The syntax for the same is given below:
//declaring a string literal let a="FavTutor" //printing the string console.log(a);
Output:
FavTutor
3 Methods to Concatenate Strings in JavaScript
String concatenation is a fundamental operation in JavaScript. It means combining or joining strings together to create a new string. Let’s check out various methods for how to do it in JavaScript:
1) Using the + Operator
The first method of concatenating the string is by using the “+” operator. It is one of the simplest and most commonly used methods. “+” symbol in general terms represents additivity. So, we can concatenate the strings using it.
Here’s an example:
//declaring one string let first = "Fav"; //declaring another string let last = "Tutor"; //concatenating two strings let full = first+last; //printing the string console.log(full);
Output:
FavTutor
In this example, we had two strings, first and last which are operated through the “+” operator and concatenated together. Thus, we have got the desired result.
Even when using numbers as strings, the + operator just joins them together. Look at the below code:
//declaring one string let first = "3"; //declaring another string let last = "5"; //concatenating two strings let full = first+last; //printing the string console.log(full);
Output:
35
We have obtained the desired result.
2) Using the concat() Method
The concat() method is the best way for string concatenation in JavaScript. It allows you to join multiple strings together by calling the concat() method on one string and passing the other strings as arguments.
Let us see an example of how to use concat() method:
//declaring one string let first = "Fav"; //declaring another string let last = "Tutor"; //concatenating two strings using concat() let full = first.concat(last); //printing the string console.log(full);
Output:
FavTutor
In this example, we had two strings: first and last. To perform the concatenation operation, we used the concat() method which combines or joins both strings. We have got the desired result.
Let’s look at another example, where we do not declare the second string but use it directly within the concat() method:
//declaring one string let first = "Fav"; //concatenating two strings using concat() let full = first.concat("Tutor"); //printing the string console.log(full);
Output:
FavTutor
Now, what if we use a number inside the concat() method? Let’s understand with the help of an example:
//declaring one string let first = "Fav"; //concatenating two strings using concat() let full = first.concat(3); //printing the string console.log(full);
Output:
Fav3
So, in this example, the number 3 is converted to a string and is concatenated to the first string to give us the desired result.
3) Using Template Literal
We can concatenate strings in JavaScript with the help of Template literals. It is a modern and flexible way to concatenate strings in JavaScript. We can embed the expressions and variables directly within a string using the backticks (`). Enclose the strings to be concatenated in the ${} curly braces within the backticks.
Let us see an example:
//declaring first string let first="Fav"; //declaring the last string let last="Tutor"; //concatenating using the (`) template literals let full=`${first}${last}`; //printing the concatenated string console.log(full);
Output:
FavTutor
In this example, we have used the template literals to concatenate two string variables. We enclose the string variables within ${} within the backticks. Hence, we create a template literal that will evaluate this expression and give us the desired output.
Sometimes you might a string in array form, so must know how to convert an array to a string in JavaScript.
Which method is best for concatenation?
Several different projects have several different requirements. We have to choose between the string concatenation methods according to our requirements.
- + operator is generally used for simple concatenations or when working with a small number of strings.
- concat() method is used when we are concatenating multiple strings or arrays of strings.
- Template Literals are commonly used for complex string interpolations or when we are incorporating expressions or variables within a string.
Conclusion
In this article, we have explored various methods for string concatenation in JavaScript. We have used the “+” operator, the concat() method, and template literals to concatenate strings together. It is important to know these methods to use them in your projects efficiently.