3 Ways to Concatenate Strings in JavaScript
There are 3 ways to concatenate strings in JavaScript. In this tutorial, you'll the different ways and the tradeoffs between them.
The + Operator
The same + operator you use for adding two numbers can be used to concatenate
two strings.
const str = 'Hello' + ' ' + 'World';
str; // 'Hello World'You can also use +=, where a += b is a shorthand for a = a + b.
let str = 'Hello';
str += ' ';
str += 'World';
str; // 'Hello World'If the left hand side of the + operator is a string, JavaScript will coerce
the right hand side to a string. That means it is safe to concatenate objects,
numbers, null, and undefined.
let str = 'Values: ';
str += 42;
str += ' ';
str += {};
str += ' ';
str += null;
str; // 'Values: 42 [object Object] null'The + and += operators are fast on modern JavaScript engines, so no need to worry about something like Java's StringBuilder class.
Array#join()
The Array#join() function creates a new string from concatenating all elements in an array. For example:
['Hello', ' ', 'World'].join(''); // 'Hello World'The first parameter to join() is called the separator. By default, the
separator is a single comma ','.
['a', 'b', 'c'].join(); // 'a,b,c'You can pass in any separator you want. Separators make Array#join() the preferred
choice for concatenating strings if you find yourself repeating the same character over and over again. For example, you can use ' ' as the separator to join an array of words:
// 'Twas the night before Christmas'
['Twas', 'the', 'night', 'before', 'Christmas'].join(' ');Or you can use '/' to join together URL fragments:
// 'masteringjs.io/tutorials/fundamentals/string-concat'
['masteringjs.io', 'tutorials', 'fundamentals', 'string-concat'].join('/');Separators make Array#join() a very flexible way to concatenate strings. If you
want to join together a variable number of strings, you should generally use join()
rather than a for loop with +.
String#concat()
JavaScript strings have a built-in concat() method. The concat() function takes one or more parameters, and returns the modified string. Strings in JavaScript are immutable, so concat() doesn't modify the string in place.
const str1 = 'Hello';
const str2 = str1.concat(' ', 'World');
// 'Hello'. Strings are immutable, so `concat()` does not modify `str1`
str1;
// 'Hello World'
str2;The downside of using concat() is that you must be certain str1 is a string.
You can pass non-string parameters to concat(), but you will get a TypeError
if str == null.
// If `str` is null or not a string, can't use `concat()`
const str = 'Values: ';
// 'Values: 42 null'
str.concat(42, ' ', null);The concat() function is rarely used because it has more error cases than the
+ operator. For example, you would get unexpected behavior if you call concat()
on a value that happens to be an array. You should use + instead of concat() unless you have a very good reason.
If you must use concat(), it is usually best to call it on an empty string:
''.concat('Hello', ' ', 'World');