Learn how to combine strings made up of static text and variable values using both the concatenation and template literal approaches.

Ah, yes - it’s time for us to look at the ancient art of combining strings and variables where we generate a string made up of both literal (static) text values along with variables whose values are defined as a result of some JavaScript operation. This is an important topic for us to look at, for we will find ourselves combining strings and variables quite often - whether it is for printing messages to the console, specifying a key to some Object, generating a complex CSS property value, or trying to accomplish a boatload of other things.

In the following sections, we’ll look at the two best approaches we have in JavaScript for combining strings and variables. This is going to be a hoot!

Onwards!

Our Setup

To help highlight the two approaches, let’s work with an example. For this example, we are going to have a function called sayGreeting, and it will take three arguments - one argument for the greeting, one argument for whom the greeting is targeted to, and one argument for an emoji to display. This function's signature will loosely look as follows:

If we call our sayGreeting function with the arguments Hello hello hello, Police Officer Panda, and 🐼, what this function will return is a string that looks as follows:

Hello hello hello, Police Officer Panda! How are you? 🐼

Notice that some of the words in the greeting are based on the arguments we passed in. Some of the words are provided by the function itself. And with this, it's time to look at what exactly goes on inside our sayGreeting function.

Using the + Operator (aka String Concatenation)

An approach as old as time for combining strings is one where we combine (aka concatenate) each string fragment using the + operator. Take a look at the following:

function sayGreeting(greeting, who, emoji) {
  let message = greeting + ", " + who + "! How are you? " + emoji;
  return message;
}

let batman = sayGreeting("Good morning", "Batman", "😀");
console.log(batman); // Good morning, Batman! How are you? 😀

Notice how we combine the values of the greeting, who, and emoji arguments with some of our predefined text to generate the final message:

function sayGreeting(greeting, who, emoji) {
  let message = greeting + ", " + who + "! How are you? " + emoji;
  return message;
}

Each literal text value is separated using quotations marks. We use the + operator to stitch together these literal text values and variables together into one final string, which is stored by message. The spaces and punctuation marks that make up our final greeting are explicitly (maybe awkwardly?) defined as well.

Now, what we have here is a fairly simple example. For more complex strings made up of a bunch of variables and literal values, the number of + operators and quotation marks can become quite large and unwieldy. Quotation marks inside a literal written in our JavaScript source may need escaping. Quotation marks inside a value we already have at runtime are just text; combining that value into a greeting does not reparse it as JavaScript. Keeping all the source-code delimiters straight still isn't the sort of stuff I always get right on the first try!

Template Literals (aka String Interpolation)

A more modern approach involves using what are known as template literals. With template literals, instead of using the + operator to combine each string fragment, we define the full string up front and mark the areas where we need to substitute a value dynamically. This will make more sense with an example, so what we have below is another version of our sayGreeting function, this time using template literals:

function sayGreeting(greeting, who, emoji) {
  let message = `${greeting}, ${who}! How are you? ${emoji}`;
  return message;
}

let panda = sayGreeting("Hello hello hello", "Police Officer Panda", "🐼");
console.log(panda); // Hello hello hello, Police Officer Panda! How are you? 🐼

Notice what is going on here. First, we define the full string, but we don’t designate it as a string by wrapping it using quotation marks. Instead, we use the mysterious backtick character ( ` ) which is to the left of the number 1 key on most of our keyboards:

The backtick characters define a template literal. We mark each place where we want to insert a value using ${expression}. The expression is evaluated when the template runs, and its result is converted to text. Our expression can use a variable, an arithmetic calculation, a function call, and more. The resulting string is a value at that moment, not a live binding that updates when a variable changes. Formatting the value also does not validate our inputs or prove that a calculation is correct. We'll keep our example focused on variables:

function sayGreeting(greeting, who, emoji) {
  let message = `${greeting}, ${who}! How are you? ${emoji}`;
  return message;
}

All of this is accomplished without the error prone process of breaking up our string using + operators and inserting a series of opening and closing quotation marks around our literal string values. By working with our final string output and using placeholders, this approach is also more readable. This makes substituting some text values from a large and complex string a piece of 🍰!

Conclusion

We have two (good) approaches for combining literal strings with variables:

1. String concatenation using the + operator
2. String interpolation using template literals

The all-important question is, which one should we use? Unless you are dealing with something really trivial, I would shy away from using the string concatenation approach. It gets really error prone when you have many series of string fragments that you need to deal with. Also, getting all the quotation marks and spaces right is too time consuming. Combining strings using the template literal approach is quite good for almost any scenario because of how readable the code is. This readability comes in quite handy for both simple cases as well as more complex cases as highlighted across many articles on the site.

What we also have in JavaScript are a handful of other ways to combine text. The concat method lives on the String prototype, and arrays have a join method that can be useful when we already have a list of pieces and a separator. For the fixed greeting we built here, I prefer the template because the shape of the sentence is easy to see.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇