TypeScript String Interpolation

Introduction to TypeScript String Interpolation

String interpolation in TypeScript is defined as an expression that is used to evaluate string literals that contain one or more expressions. It checks the expression and gets the desired result in the form of a string, which is then replaced with the original string. When a user wants to generate some string out of static string and variables that require a templating logic, we use string interpolation.

Syntax of TypeScript String Interpolation

There is specifically no syntax for string interpolation, but we need to enclose the string using backticks along with placeholder ${} instead of single quotes '' or double quotes "".

This string interpolation is supported only in ES5/ES6 and above versions. Here, we will use backticks for the output log to print. The code replaces the placeholders with the real values at runtime.

Rules & Regulations for TypeScript String Interpolation

There are various rules that are applied to String Interpolation in TypeScript:

• String interpolation replaces the placeholder with the values of string literals of any type.
• String interpolation is also known as Templating.
• They are enclosed using backticks that denote the start and end of the string.
• Backticks are known as template literals and are defined as string literals in which expressions are embedded.
• The main usage of interpolation is to use template strings that are created to build strings with static and variable parts.
• It is good to use intermediate variables to hold complex expressions before actually sending them to the placeholder.

How to Perform String Interpolation in TypeScript?

Example of TypeScript String Interpolation

Output:

In the above snippet, $(cricketerName) is an expression. It will be evaluated first and the resulting value MS Dhoni will be replaced at its place in the resulting string.

Example of TypeScript String Interpolation with Multiple Expressions

Interpolation of more than one expression at a time can result in multiple interpolations.

Output:

In the above snippet, ${} dollar with enclosed flower brackets are used to read const values and further sent to the resulting string.

Example of TypeScript String Interpolation for Arithmetic Expressions

In this section, we will see string interpolation for arithmetic expressions.

Output:

In the above snippet, we saw string interpolation works well for arithmetic expressions.

Example of TypeScript String Interpolation Using Ternary Operator in the Template String

In this section, we will see string interpolation using the Ternary Operator in the Template String.

Output:

In the above snippet, we have used the ternary operator to check the value of the expression and interpolate the expression on the console.

Example of TypeScript String Interpolation Using Nested Expressions

In this section, we will see string interpolation using nested expressions.

Output:

In the above snippet, we saw string interpolation works well for nested expressions.

Example of TypeScript String Interpolation using String Methods

In this section, we will see string interpolation using string methods.

Output:

In the above snippet, we saw string interpolation works well for string methods.

Example of TypeScript String Interpolation Using Functions

In this section, we will see string interpolation using Functions.

Output:

In the above snippet, we found the perimeter of a square using string interpolation with a function.