Interpolate Variable in a String in JavaScript

avatar

Borislav Hadzhiev

Last updated: Oct 20, 2021

banner

Photo from Unsplash

Interpolate Variable in a String #

Use a template literal to interpolate a variable in a string, e.g hello ${myVar}. Template literals are delimited with backticks and allow us to embed variables and expressions using the dollar sign and curly braces ${expression} syntax.

index.js
const name = 'Tom'; const result = `Hello, ${name}!`; console.log(result); // 👉️ 'Hello, Tom!'

We used a template literal to interpolate a variable in a string.

Note that the string is enclosed in backticks ``, not in single quotes.

The dollar sign and curly braces syntax allows us to use placeholders that get evaluated.

index.js
const num = 50; const result = `${num + 50} percent`; console.log(result); // 👉️ 100 percent

By default, the template literal concatenates the parts into a string.

Any expression that gets passed using the dollar sign and curly braces ${} syntax gets evaluated.

index.js
const num = 50; const result = `50 divided by 10 is: ${50 / 10}`; console.log(result); // 👉️ '50 divided by 10 is: 5'

You can also interpolate variables in multi-line strings using a template literal.

index.js
const color1 = 'red'; const color2 = 'blue'; const poem = `roses are ${color1} violets are ${color2}`; console.log(poem); // 👉️ roses are red // 👉️ violets are blue

This is very useful because we don't have to add a newline character on each line, as opposed to when concatenating strings:

index.js
const poem = 'roses are ' + color1 + '\n' + 'violets are ' + color2; console.log(poem); // 👉️ roses are red // 👉️ violets are blue

Since template literals are enclosed in backticks ``, if your string contains a backtick character, you have to escape it using a backslash.

index.js
const num1 = 'one'; const num2 = 'two'; const escaped = `${num1}\`${num2}`; console.log(escaped); // 👉️ 'one`two'

You can even call functions in template literals.

index.js
function subtract(a, b) { return a - b; } const result = `10 - 5 is equal to: ${subtract(10, 5)}`; console.log(result); // 👉️ 10 - 5 is equal to: 5

The dollar sign curly braces syntax is very powerful when you have to incorporate logic when interpolating a variable in a string.

Here's an example of using the ternary operator with template literals.

index.js
const color1 = 'blue'; const color2 = 'red'; const result = `${color1.length > color2.length ? color1 : color2}`; console.log(result); // 👉️ blue

The ternary operator is basically an if/else statement. The part before the question mark gets evaluated and if it returns true, it returns the value before the colon, otherwise it returns the value after the colon.

You can also use the logical OR (||) and logical AND (&&) operators in a template literal.

index.js
const num1 = 0; const num2 = 100; const result = `${num1 || num2}`; console.log(result); // 👉️ 100

The logical OR (||) operator returns the value to the left if it's truthy, otherwise it returns the value to the right.

Here's an example of using the logical AND (&&) operator with template literals.

index.js
const bool = true; const str = 'hello'; const result = `${bool && str}`; console.log(result); // 👉️ hello

The logical AND (&&) operator returns the value to the left if it's falsy, otherwise it returns the value to the right.

These are the most common ways to interpolate a variable or expression in a string. You can incorporate function calls and all sorts of logic when using template literals.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.