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.<\/p>\n\n\n\n
Strings in JavaScript represent a sequence of multiple characters. \u2018C\u2019 represents a single character and \u201cCat\u201d 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.<\/p>\n\n\n\n
The syntax for the same is given below:<\/p>\n\n\n\n
\/\/declaring a string literal\nlet a="FavTutor"\n\n\/\/printing the string\nconsole.log(a);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
FavTutor<\/code><\/pre>\n\n\n\n3 Methods to Concatenate Strings in JavaScript<\/strong><\/h2>\n\n\n\n
String concatenation is a fundamental operation in JavaScript. It means combining or joining strings together to create a new string. Let\u2019s check out various methods for how to do it in JavaScript:<\/p>\n\n\n\n
1) Using the + Operator<\/strong><\/h3>\n\n\n\n
The first method of concatenating the string is by using the \u201c+\u201d<\/strong> operator. It is one of the simplest and most commonly used methods. \u201c+\u201d symbol in general terms represents additivity. So, we can concatenate the strings using it.\u00a0<\/p>\n\n\n\n
Here\u2019s an example:<\/p>\n\n\n\n
\/\/declaring one string\nlet first = "Fav";\n\n\/\/declaring another string\nlet last = "Tutor";\n\n\/\/concatenating two strings\nlet full = first+last;\n\n\/\/printing the string\nconsole.log(full);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
FavTutor<\/code><\/pre>\n\n\n\nIn this example, we had two strings, first and last which are operated through the \u201c+\u201d operator and concatenated together. Thus, we have got the desired result.<\/p>\n\n\n\n
Even when using numbers as strings, the + operator just joins them together. Look at the below code:<\/p>\n\n\n\n
\/\/declaring one string\nlet first = "3";\n\n\/\/declaring another string\nlet last = "5";\n\n\/\/concatenating two strings\nlet full = first+last;\n\n\/\/printing the string\nconsole.log(full);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
35<\/code><\/pre>\n\n\n\nWe have obtained the desired result.<\/p>\n\n\n\n
2) Using the concat() Method<\/strong><\/h3>\n\n\n\n
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.<\/strong><\/p>\n\n\n\n
Let us see an example of how to use concat() method:<\/p>\n\n\n\n
\/\/declaring one string\nlet first = "Fav";\n\n\/\/declaring another string\nlet last = "Tutor";\n\n\/\/concatenating two strings using concat()\nlet full = first.concat(last);\n\n\/\/printing the string\nconsole.log(full);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
FavTutor<\/code><\/pre>\n\n\n\nIn 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.<\/p>\n\n\n\n
Let\u2019s look at another example, where we do not declare the second string but use it directly within the concat() method:<\/p>\n\n\n\n
\/\/declaring one string\nlet first = "Fav";\n\n\/\/concatenating two strings using concat()\nlet full = first.concat("Tutor");\n\n\/\/printing the string\nconsole.log(full);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
FavTutor<\/code><\/pre>\n\n\n\nNow, what if we use a number inside the concat() method? Let\u2019s understand with the help of an example:<\/p>\n\n\n\n
\/\/declaring one string\nlet first = "Fav";\n\n\/\/concatenating two strings using concat()\nlet full = first.concat(3);\n\n\/\/printing the string\nconsole.log(full);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
Fav3<\/code><\/pre>\n\n\n\nSo, in this example, the number 3 is converted to a string and is concatenated to the first string to give us the desired result.<\/p>\n\n\n\n
3) Using Template Literal<\/strong><\/h3>\n\n\n\n
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.\u00a0\u00a0<\/p>\n\n\n\n
Let us see an example:<\/p>\n\n\n\n
\/\/declaring first string\nlet first="Fav";\n\n\/\/declaring the last string\nlet last="Tutor";\n\n\/\/concatenating using the (`) template literals\nlet full=`${first}${last}`;\n\n\/\/printing the concatenated string\nconsole.log(full);<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
FavTutor<\/code><\/pre>\n\n\n\nIn 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.<\/p>\n\n\n\n