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');