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.

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

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.

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.

Copied!
// 👇️ 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.

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

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

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

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

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

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

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

You can even call functions in template literals.

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"

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.

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

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

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 expression in a string. You can incorporate function calls and all sorts of logic when using template literals.