In this blog, let us look at how one can achieve string concatenation & different methods to do it through examples of each type.
Using the concat() method
As the name suggests, this method joins or merges two strings. This method does not alter the input/given strings, instead, it returns a new string that has both the input strings concatenated.
Syntax:
string.concat(string1, string2, ..., stringN);
Here, the parameters string1, string2, ..., stringN are the strings that to be concatenated.
Example:
var str1 = "Example of ";
var str2 = "Javascript ";
var str3 = "String Concatenation";
var res = str1.concat(str2, str3);
console.log(res);
//Output: Example of Javascript String Concatenation
One downside of using concat() method is that the passed parameter must certainly be a string. Non-string parameters can be passed to this method but it would throw a TypeError if the passed string == null. Also, strings in JavaScript are immutable, so concat() doesn't modify the string in place.
Using the + operator
The + operator is the same operator we use to add 2 numbers. It can be used to concatenate strings too in JavaScript.
Syntax:
let str = 'Hello';
str += ' ';
str += 'World';
//Output: Hello World
One can also concat strings using the + operator using the shorthand += operator
let str = 'Hello';
str += ' ';
str += 'World';
//Output: Hello World
Using the array join() method
The join() method is used to concatenate all the elements of an array into a string. The elements will be separated by a specified separator. When no separator is specified, the default separator is the comma (,). The array join() method does not alter the original array
Syntax
array.join(separator)
Here the Separator is an optional parameter
Example:
var arry = ["JavaScript", "String", "Concatenate"];
var finalString = arry.join();
console.log(finalString);
//Output: JavaScript,String,Concatenate
Using the template literal
Template literals are string literals allowing embedded expressions. Using these template literals one can also use multi-line strings and string interpolation features with them.
Syntax
Let expression = 'String1'
`string text ${expression} string text
Example
let str1 = 'Javascript';
let str2 = 'String';
let str3 = 'Concatenate';
let strJoined = `${str1} ${str2} ${str3}`;
console.log(strJoined);
//Output: Javascript String Concatenate
Conclusion
If we look at the browser support, The concat() and join() methods are supported by all the modern browsers. Now the main question is, which one is the best method to use? Well, to answer this question, these methods work differently on different browsers. For example, on Chrome, standard string appends are faster than array joins but on Firefox, it is vice-versa. Do look at this(https://www.sitepoint.com/javascript-fast-string-concatenation/) blog for detailed performance metrics.
