concat() JavaScript String Method – How to Merge Strings
Whenever you use concat() on a string, the method does the following:
- It concatenates (merges) its calling string with its arguments.
- It creates a new string with the merged values.
Syntax of the concat()
Method
Section titled “Syntax of the concat() Method”concat()
accepts one or more arguments. Here is the syntax:
callingString.concat(item1, item2, ..., itemX)
The item
arguments are the values you wish to concatenate with the callingString
.
Examples
Section titled “Examples”Below are examples of the concat()
method.
How to merge a string with another string
Section titled “How to merge a string with another string”// Define two strings:const string1 = "Code";const string2 = "Sweetly";
// Merge string1 with string2:const newString = string1.concat(string2);
// Log the newString to the console:console.log(newString);
// The invocation above will return: "CodeSweetly"
The snippet above used concat()
to concatenate (merge) string1
with string2
.
How to merge a string with three other strings
Section titled “How to merge a string with three other strings”// Define four strings:const string1 = "Code";const string2 = "Sweetly";const string3 = ".";const string4 = "com";
// Merge string1 with string2, string3, and string4:const newString = string1.concat(string2, string3, string4);
// Log the newString to the console:console.log(newString);
// The invocation above will return: "CodeSweetly.com"
The snippet above used concat()
to concatenate four strings.
How to merge a string with JavaScript data types
Section titled “How to merge a string with JavaScript data types”"".concat(53); // "53""".concat("Brown"); // "Brown""".concat(true); // "true""".concat(undefined); // "undefined""".concat(null); // "null""".concat({}); // "[object Object]""".concat([]); // ""
How to merge a string with a number
Section titled “How to merge a string with a number”// Define a string:const string1 = "October ";
// Merge string1 with a number:const newString = string1.concat(26);
// Log the newString to the console:console.log(newString);
// The invocation above will return: "October 26"
The snippet above used concat()
to merge string1
with a number.
How to merge a string with three numbers
Section titled “How to merge a string with three numbers”// Define a string:const string1 = "October ";
// Merge string1 with three numbers:const newString = string1.concat(2, 0, 93);
// Log the newString to the console:console.log(newString);
// The invocation above will return: "October 2093"
The snippet above used concat()
to merge string1
with three numbers.
concat()
vs. Addition Operator vs. Template Literal
Section titled “concat() vs. Addition Operator vs. Template Literal”The concat()
method, addition operator (+
), and template literal “
concatenate strings in very similar ways, but they are not equivalent.
For instance, consider this snippet:
"".concat(53); // "53"
`53`; // "53"
"" + 53; // "53"
The three lines of code above appear to do the same thing, but here’s the difference:
concat()
and the template literal coerced53
directly to a string.- The addition operator (
+
) first coerced53
to its primitive data type (Number in this case). concat()
and the template literal call thetoString()
method in priority.- The addition operator (
+
) calls thevalueOf()
method in priority.
Therefore, suppose you use the addition operator with objects whose valueOf()
throws an Error. In that case, the browser will throw a TypeError. See this MDN description for a typical example.