JavaScript format string with variables and expressions

Posted on Mar 23, 2022

Learn how to format and insert variables and expressions to a string in JavaScript

This tutorial will help you learn how to insert variables and expressions from your JavaScript code into a string.

JavaScript allows you to format a string with variables and expressions from your code in three ways:

  • Using string concatenation with + symbol
  • Using template literals with backticks (` `) symbol
  • Using a custom string you define yourself

Let’s learn how to format a string using the three techniques above, starting with string concatenation.

Format JavaScript string with concatenation

When used in JavaScript strings, a plus + symbol is treated as a concatenation operator that joins your variables and values as a string.

The code below shows how you can concatenate values together as a string:

let name = "Nathan";
let role = "Software Developer";

let aString = "Hello! My name is " + name + " and I'm a " + role;

console.log(aString);
// "Hello! My name is Nathan and I'm a Software Developer"

As you can see, the variable name and role are inserted into the string using the + symbol.

But using the + symbol can produce the wrong result if you’re using a more advanced format with expressions, such as number calculations and ternary conditionals.

For example, the following number expression produces the wrong output:

console.log("The sum of 5 + 2 is " + 5 + 2);
// "Sum of 5 + 2 is 52"

As you can see, adding the numbers 5 + 2 produces 52 instead of 7.

To produce the correct output, you need to wrap the expression using round brackets as follows:

console.log("The sum of 5 + 2 is " + (5 + 2));
// "The sum of 5 + 2 is 7"

Next, using ternary operators also produce the wrong result as follows:

let married = false;

console.log("You are " + married == true ? "married" : "single");
// "single"

Like with the numbers, you need to wrap the ternary operation in a round bracket as follows:

console.log("You are " + (married == true ? "married" : "single"));
// "You are single"

And that’s how you can insert variables and values using the string concatenation technique.

Since 2015, a new syntax called template literals was added to the JavaScript language. This new syntax improves JavaScript’s ability to embed expressions into a string.

Format JavaScript string with template literals

The template literals are used for creating multi-line strings and inserting expressions into strings.

Template literals are also called template strings because they are used for creating strings with placeholders.

Template literals use the backtick symbol ` as the delimiters.

Here’s an example of a template literal in action:

let name = "Nathan";
let role = "Software Developer";

let aString = `Hello! My name is ${name} and I'm a ${role}`;

console.log(aString);
// "Hello! My name is Nathan and I'm a Software Developer"

Note how the aString variable above starts with a backtick instead of a single or double quotes.

In a template string, you insert an expression into the string using the dollar sign and curly braces symbol (${}).

You can also include numbers and ternary operations inside the ${} symbol as shown below:

console.log(`The sum of 5 + 2 is ${5 + 2}`);
// "The sum of 5 + 2 is 7"

let married = false;

console.log(`You are ${married == true ? "married" : "single"}`);
// "You are single"

As you can see, it’s easier to format a string using template literals than string concatenations.

Since its release, the template literal has been the default technique used in formatting JavaScript strings.

Format JavaScript string with a custom function

In other programming languages like Python, the string has a format() method that you can use to format a string with expressions.

The code below shows how the Python format() method works:

name = "Nathan"
role = "Software Developer"
aString = "My name is {0}, I'm {1}".format(name, role)

print(aString)
# My name is Nathan, I'm Software Developer

In the example above, the {0} and {1} template is replaced with the expressions put in the format() function call.

Following the Python implementation, you can add a format() method to the JavaScript String prototype as follows:

if (!String.prototype.format) {
  String.prototype.format = function () {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function (match, number) {
      return typeof args[number] != "undefined" ? args[number] : match;
    });
  };
}

The format() method above uses a regular expression to search and replace the template numbers like {0} and {1} with the arguments you pass into the method.

Once you’ve added the string method above, you can call it from any string you define in your code:

let name = "Nathan"
let role = "Software Developer"
let aString = "My name is {0}, I'm a {1}".format(name, role);

console.log(aString);
// My name is Nathan, I'm a Software Developer

In general, it’s not recommended to add a custom method to the prototype object unless you have a strong reason.

For most cases, using the template literal is enough to format a string with expressions and variables.

Now you’ve learned how to format a string with JavaScript in three different ways. Great job! 👍

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.