Interpolate Variables in a String in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 17, 2022

banner

Photo from Unsplash

Interpolate Variables in a String in TypeScript #

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

index.ts
const str = 'Alfred'; // 👇️ const result: string const result = `Hello ${str}!`; // 👇️ "Hello Alfred!" console.log(result);

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

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

TypeScript is able to infer the type of a template literal to be a string, because that's what it is - a string that allows us to embed variables and expressions.

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

index.ts
const num = 10; // 👇️ const result: string const result = `${num + 23} percent`; console.log(result); // 👉️ "33 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.ts
// 👇️ const result: string const result = `10 multiplied by 5 is ${10 * 5}`; console.log(result); // 👉️ "10 multiplied by 5 is 50"

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

index.ts
const str1 = 'line 1'; const str2 = 'line 2'; const result = `this is ${str1} this is ${str2}`; console.log(result); // 👉️ this is line 1 // 👉️ this is line 2

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

index.ts
const str1 = 'line 1'; const str2 = 'line 2'; const result = 'this is ' + str1 + '\n' + 'this is ' + str2; console.log(result); // 👉️ this is line 1 // 👉️ this is line 2

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

index.ts
const str1 = 'hello'; const str2 = 'world'; const result = `${str1}\`${str2}`; console.log(result); // 👉️ hello`world

You can even call functions in template literals.

index.ts
function multiply(a: number, b: number): number { return a * b; } const result = `10 * 5 is equal to ${multiply(10, 5)}`; console.log(result); // 👉️ "10 * 5 is equal to 50"

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.ts
const str1 = 'world'; const str2 = 'one'; // 👇️ const result: string const result = `${str1.length > str2.length ? str1 : str2}`; console.log(result); // 👉️ "world"

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.ts
const num1 = 0; const num2 = 50; // 👇️ const result: string const result = `${num1 || num2}`; console.log(result); // 👉️ '50'

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.ts
const str1 = 'hello'; const str2 = 'world'; const result = `${str1 && str2}`; console.log(result); // 👉️ "world"

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.

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.