TypeScript - string templates

In this article, we would like to show you string templates in TypeScript.

Quick solution:

xxxxxxxxxx

const username: string = 'Tom';

const template: string = `User: ${username} logged in.`;

​

console.log(template); // User: Tom logged in.

In this example, we present step by step how to create template literals (string templates) in TypeScript.

1. Syntax

To define template literals, we need to use back-ticks (``).

xxxxxxxxxx

const template: string = `Hello World!`;

2. Expression placeholders

Template literals can contain placeholders indicated by the dollar sign and curly braces (${expression}).

xxxxxxxxxx

const x: number = 1;

const y: number = 2;

​

const template: string = `The result of x+y is ${x + y}.`;

​

console.log(template);

Output:

xxxxxxxxxx

The result of x+y is 3.