When working on a project as a programmer, you will likely need to update a string in one of the...

When working in JS, there may be times when you need to add more strings to one. This simple guide shows you the art of string concatenation in JavaScript.

Your Guide to String Concatenation in JavaScript

How to Concatenate Two Strings in JavaScript

String concatenation means the same thing in all programming languages. It simply adds one or more strings to another string, usually to the end of that string. For example, if you want to concatenate “Hello” and “Joshua”, it becomes “Hello Joshua” by adding Joshua to the end of Hello.

What is string concatenation in JavaScript?

Let’s discuss the various ways to combine strings in JS.

Methods to concatenate strings

In JavaScript, the “+” operator can be used to add strings together. You can add as many strings as you want.

let greeting = "hello";
let name = "Joshua";
let aboutMe = "programmer";
console.log(greeting + name + "is a" + aboutMe);

Output:

//helloJoshuais aprogrammer

You can see that there is a flaw in the output. There is no space between the variables that were concatenated. This can be corrected by adding a space between each concatenated variable.

         let greeting = "hello";
         let name = "Joshua";
         let aboutMe = "programmer";
         console.log(greeting + " " + name + " " + "is a" + " " + aboutMe);
         Output:
          // hello Joshua is a programmer
         Other examples:
         let socialMedia1 = "Facebook"
         let socialMedia2 = "Twitter"
         let socialMedia3 = "Linkedln"
         console.log("As a Programmer, it is good to be available on" + " " +  socialMedia1 + " " + 
         socialMedia2 + " " + socialMedia3 )
         
   Output:

        // As a Programmer, it is good to be available on Facebook Twitter Linkedln

Although the output is now correct (by adding a space (“ “) between each variable that was concatenated), the method used can be laborious when you want to concatenate up to 10 variables that were declared and initialized. This can be addressed with the next method.

Using the “+” operator

The template literals is a special character in JavaScript that serves various purposes, such as multiline strings, string concatenation, etc. An ES6 feature, it was introduced in 2015 and is supported in all modern browsers except Internet Explorer. One major feature, “variable substitution”, allows JavaScript string concatenation.

The variable substitution method of template literals is one of the best ways to concatenate
strings in JavaScript.

let part1 = "learning";
let part2 = "JavaScript";
let part3 = "missing";
console.log(`if you are not ${part1} ${part2}, you are ${part3}`);

//if you are not learning JavaScript, you are missing

Using the template literals (${``})

concat() is a built-in method that combines strings in JS. It adds the new string to the old string and returns the overall string.

const myName = "Joshua";
console.log(myName.concat(" said that he loves programming"));
Output:
// Joshua said that he loves programming
let a = "string1";
console.log(a.concat("string2, string3"));

Output:
string1string2, string3

a – This is the existing string that you want to combine with other strings.

b – This is the new string that is to be added to a (the old string).

let a = "programming";
let b = "excellently well";
console.log(a.concat("help a programmer think", b));

Output:

//programminghelp a programmer thinkexcellently well

In the above example, you can see that the error made in the + operator is also made here. This can be resolved the same way, i.e., by adding a space to separate each concatenation.

console.log(a.concat(" help a programmer think ", b));

Putting a space at the beginning of the concatenation will separate “programming” and “help”. It will also separate “think” and “excellently”.

Note: When using the concat() method, each concatenation is separated by a comma otherwise it will display an error.

let a = "programming";
let b = "excellently well";
console.log(a.concat(" help a programmer think" b));

Output:

// Uncaught SyntaxError: missing ) after argument list

An error is displayed when there is no comma between “programmer” and “b” because what you console.log cannot be evaluated correctly. You need to make sure that it is formatted properly by adding a comma. This tells JavaScript that it is undergoing concatenation, that b is a variable, and that you want to concatenate with the existing string (“programming help a programmer think”).

console.log(a.concat(" help a programmer think", b));

Using the concat() method

This will concatenate all the values in an array and return a new string from an array, which by default is separated by a comma. You can use other string parameters or separators to join the string together.

const sport = ["Football", "Tennis", "Cricket", "Golf"];
console.log(sport.join());

Output:

//Football,Tennis,Cricket,Golf

In the first example, the default string parameter or separator is a comma but you can use others to separate them, such as space, dash, or asterisk.

const sport = ["Football", "Tennis", "Cricket", "Golf"];
console.log(sport.join(" "))

Output:

Football Tennis Cricket Golf

const sport = ["Football", "Tennis", "Cricket", "Golf"];
console.log(sport.join("-"));

Output:

Football-Tennis-Cricket-Golf

const sport = ["Football", "Tennis", "Cricket", "Golf"];
console.log(sport.join("*"));

Output:

Football*Tennis*Cricket*Golf

Using array.join() method

We’ve explored JavaScript concatenation, what it is, and the various methods used to concatenate strings, including the “+” operator, template literals, the concat method, and the array.join method. Use them in your projects whenever you need to update strings in your code.

Conclusion

When working on a project as a programmer, you will likely need to update a string in one of the codes by adding other strings to it. This is possible with the help of concatenation, a programming term used for combining several values into one value. In this article, we will look at string concatenation in JavaScript and how to merge strings using different methods.

There is no best concatenation method to use as every developer’s tastes are different. You should use the one that you understand and is appropriate for the situation.

Concatenation is a programming term that refers to combining more than one value into one value. This allows a programmer to combine more than one string of text into one text.

The definition of concatenation means the same thing for both string and array. The slight difference is in the method used to concatenate them. However, some methods to concatenate strings can also be used to concatenate arrays.

Frequently Asked Questions

What’s up with Turing?
Get the latest news about us here.

Press

Know more about remote work.
Checkout our blog here.

Blog

Have any questions?
We’d love to hear from you.

FOR DEVELOPERS

How to Concatenate Two Strings in JavaScript

Author

Onwuemene Joshua

How to Connect Node.js to MongoDB

Complete Guide to Python Django Framework

How to Create a Slider in JavaScript?

How to Implement JSON Serialization in JavaScript

How to Create Bar Charts in ReactJS?

Frequently Asked Questions

Press

Blog

Contact

Hire remote developers