Interpolate Variables in a String in TypeScript

# 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

Copied!
const str = 'Alfred';

// 👇️ const result: string
const result = `Hello ${str}!`;

// 👇️ "Hello Alfred!"
console.log(result);

interpolate variables in string in typescript

The code for this article is available on GitHub

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 can infer the type of a template literal to be a string because template literals are strings that allow us to embed variables and expressions.

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

index.ts

Copied!
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

Copied!
// 👇️ const result: string
const result = `10 multiplied by 5 is ${10 * 5}`;

console.log(result); // 👉️ "10 multiplied by 5 is 50"

# Interpolating variables in multi-line strings

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

index.ts

Copied!
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

interpolating variables in multi line strings

The code for this article is available on GitHub

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

Copied!
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

# Escaping backtick characters

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

index.ts

Copied!
const str1 = 'hello';
const str2 = 'world';

const result = `${str1}\`${str2}`;

console.log(result); // 👉️ hello`world

escaping backtick characters

The code for this article is available on GitHub

# Calling functions when interpolating strings

You can even call functions in template literals.

index.ts

Copied!
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"

calling functions when interpolating strings

The code for this article is available on GitHub

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

# Using the ternary operator when interpolating strings

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

index.ts

Copied!
const str1 = 'world';
const str2 = 'one';

// 👇️ const result: string
const result = `${str1.length > str2.length ? str1 : str2}`;

console.log(result); // 👉️ "world"

The code for this article is available on GitHub

The ternary operator is very similar to an if/else statement.

If the expression to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise, the value to the right of the colon is returned.

You can imagine that the value before the colon is the if block and the value after the colon is the else block.

# Using the logical AND (||) and OR (||) operators when interpolating strings

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

index.ts

Copied!
const num1 = 0;
const num2 = 50;

// 👇️ const result: string
const result = `${num1 || num2}`;

console.log(result); // 👉️ '50'

The code for this article is available on GitHub

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

Copied!
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 an expression in a string.

You can incorporate function calls and all sorts of logic when using template literals.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Interpolate Variables in a String in TypeScript