How to Perform String Interpolation in TypeScript?

String interpolation in TypeScript is defined as an expression that is used to evaluate string literals containing expressions. It replaces placeholders with evaluated results, allowing dynamic string generation from static text and variables, making it ideal for templating logic and enhancing code readability.

Laws for using TypeScript String Interpolation

There are some laws or rules that are applied to string interpolation in TypeScript:

• String interpolation is enclosed inside the backticks (``) that show the start and end of it.
• It evaluates the expression and replaces the placeholders with the result of the string literal.
• The intermediate variables can be used for evaluating complex expressions and then placed inside the interpolation as placeholders.
• Template strings can be implemented using interpolation, which is used to create strings with variable and static parts.
• Templating is another name for the string interpolation.
• The expressions can be placed using the ${} syntax inside the original string.

Example 1: String interpolation with one variable.

The below example will explain the string interpolation with only one variable inside the original string.

const org_name: string = "GeeksforGeeks";
console.log(`This organization is ${org_name}`);

Output:

This organization is GeeksforGeeks.

Example 2: String interpolation with multiple variables.

This example will illustrate the string interpolation with more than one variable.

const org_name: string = "GeeksforGeeks";
const org_desc: string = "A Computer Science portal for all geeks."
console.log(`Organization name ${org_name}, 
Organization Description: ${org_desc}`);

Output:

Organization name GeeksforGeeks, Organization Description: A Computer Science portal for all geeks.

Example 3: String interpolation evaluating expressions.

The below example will explain the string interpolation which evaluates the expressions.

const num1: number = 1;
const num2: number = 8;
const num3: number = 3;
console.log(`Sum of Numbers ${num1} + 
${num2} + ${num3} is:
${num1 + num2 + num3}`);
console.log(`Product of Numbers ${num1} * ${num2}
* ${num3} is: ${num1 * num2 * num3}`);

Output:

Sum of Numbers 1 + 8 + 3 is: 12
Product of Numbers 1 * 8 * 3 is: 24

Conclusion

String interpolation in TypeScript offers a powerful and flexible way to create dynamic strings by combining static text and variables. By following the rules and using the ${} syntax within backticks, developers can efficiently evaluate and integrate expressions within strings.