last modified June 16, 2022
JavaScript add strings tutorial shows how to concatenate strings in JavaScript.
In JavaScript, string is an object used to represent and manipulate a sequence of characters.
There are several ways of adding strings in JavaScript:
- + operator
- concat method
- join method
- formatting strings
JavaScript add strings with + operator
The easiest way of concatenating strings is to use the + or the += operator. The + operator is used both for adding numbers and strings; in programming we say that the operator is overloaded.
add_string.js
let a = 'old'; let b = ' tree'; let c = a + b; console.log(c);In the example, we add two strings with the + opeartor.
$ node add_string.js old treeIn the second example, we use the compound addition operator.
add_string2.js
let msg = 'There are'; msg += ' three falcons'; msg += ' in the sky'; console.log(msg);The example builds a message with the += operator.
$ node add_string2.js There are three falcons in the skyJavaScript add strings with join
The join method creates and returns a new string by concatenating all of the elements of an array.
joining.js
let words = ['There', 'are', 'three', 'falcons', 'in', 'the', 'sky']; let msg = words.join(' '); console.log(msg);The example forms a message by concatenating words of an array.
$ node joining.js There are three falcons in the skyJavaScript add strings with concat
The concat method concatenates the string arguments to the calling string and returns a new string.
Because the concat method is less efficient than the + operator, it is recommended to use the latter instead.
concat.js
let a = 'old'; let c = a.concat(' tree'); console.log(c);The example concatenates two strings with the built-in concat method.
JavaScript add strings with string formatting
We can build JavaScript strings with string formatting, which is essentially another form of string addition.
formatting.js
let w1 = 'two'; let w2 = 'eagles'; let msg = `There are ${w1} ${w2} in the sky`; console.log(msg);The example builds a message using template literals.
$ node formatting.js There are two eagles in the skyIn this article, we have presented several ways of concatenating strings in JavaScript.
List all JavaScript tutorials.
Jul 29, 2019
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');More Fundamentals Tutorials
- Calculate the Median of an Array in JavaScript
- The encodeURIComponent() Function in JavaScript
- How to Check if a Date is Between Two Dates in JavaScript
- Check a String for Numbers in JavaScript
- Rename Variables When Using Object Destructuring in JavaScript
- Split on Multiple Characters in JavaScript
- Empty Objects are Truthy in JavaScript?