Tutorials Tonight
Follow Us

JavaScipt concat String


In this tutorial, you will learn 4 different ways to concatenate a string in JavaScipt with examples.

Concatenation of strings is one of the most common things that you do while programming in JavaScipt. Concatenation is the stitching of 2 or more strings to a single string.

In JavaScript, there are 4 possible ways to concatenate strings, where one of the methods is the concat() string method.

concatenate string in JavaScipt

Here is the list of 4 ways to concatenate strings in JavaScipt:

  1. concat() Method
  2. Using assignment operator
  3. Using join method
  4. Using template string

1. concat String Method

The concat() method attaches (concatenate) the strings passed argument to the method to the calling string and returns a new string.

The method accepts any number of string arguments separated by a comma.

Syntax

The syntax of concat() method is following:

str1.concat(str2, str3, str4, ...)

Let's see an example that concatenates 3 strings in one.

Example: concat Method

const str1 = "Learn ";
const str2 = "to ";
const str3 = "code";
const final = str1.concat(str2, str3); // return new String
console.log(final);
▶ Try It

The arguments are converted to string values before concatenating if it is not of the type string.

Example

const arr = ["Hello", " ", "World", "!"];
console.log("".concat(...arr));  // "Hello World!"

console.log("".concat([1, 2, 3]));  // "1,2,3"
console.log("".concat([])); // ""
console.log("".concat({}));   // [object Object]
console.log("".concat(null)); // "null"
console.log("".concat(true)); // "true"
console.log("".concat(10, 20));  // "1020"
▶ Try It

Note: It is advised to use the assignment operator (+,+=) to concatenate string instead of concat() method.


2. Using assignment operator

The strings can be concatenated using the + or += operator.

The plus operator in JavaScipt can add as well as concatenate string.

The += operator keeps previously stored sting if any in the result variable.

In an expression from the left if the operator can be converted to a number then it adds it, but as soon as the first operator appears that can't be converted to a number then it starts concatenation all rest as a string.

const str1 = "Learn ";
const str2 = "to ";
const str3 = "code";
const final = str1 + str2 + str3;
console.log(final);

console.log(5 + 5 + 12 + " = 5 + 5 + 12"); // first number added then concatenate
▶ Try It

3. Using join method

The join() array method creates a new string by concatenating all array members to a single string.

The join() method accepts the separator as the first argument, so for concatenation, you can pass an empty string ('') to it or space (' ') which will add all array members to the string separated by a space.

const array = ["Learn","to","code"];

const saperator1 = array.join("");
console.log(saperator1);

const saperator2 = array.join(" ");
console.log(saperator2);
▶ Try It

4. Using template string

Using template string is not a pure form of concatenation but this looks cool and clear. Using this you can directly embed any string variable to another string.

To concatenate are enclosed by backticks (``) and the string variable that you want to embed is enclosed by curly braces with a dollar sign (${string_variable}).

const str1 = "Learn";
const str2 = "to";
const str3 = "code";
console.log(`${str1} ${str2} ${str3}.`);
▶ Try It

Conclusion

You have learned 4 ways to concatenate string in this tutorial with examples. In general, you can use the assignment operator to concatenate and embed in any string use string literal.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.