Interpolate Variable in a String in JavaScript

avatar

Borislav Hadzhiev

Wed Oct 20 20212 min read

banner

Photo by Wenkui Xiao

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 #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee