String Interpolation in TypeScript

1. String Interpolation for Single Expression in TypeScript
2. String Interpolation for Multiple Expressions in TypeScript
3. String Interpolation for Arithmetic Expressions in TypeScript
4. String Interpolation for Conditional Expressions in TypeScript
5. String Interpolation for String Built-In Methods/Functions in TypeScript
6. String Interpolation for Custom Methods/Functions in TypeScript

In this tutorial, we will discuss string interpolation in TypeScript to cover the concept for the basic expressions and complex expressions. String interpolation means calling a variable in a static string.

TypeScript uses backticks for string interpolation, which indicates the start and endpoint of the string.

The string is called inside these backticks with the variable enclosed in the curly/flower brackets as {} starting with a dollar sign as $ at the start.

The syntax for string interpolation in TypeScript will be shown below.

String Interpolation for Single Expression in TypeScript

TypeScript can handle expressions in string interpolation. Let’s kick off this concept with a single expression.

Let us take an example:

let name1: string = "John Nash";
console.log(`My name is ${name1}.`);

Output:

My name is John Nash.

In this example, the variable name1 has a value of John Nash. The variable name1 has a type string.

Now the console statement has the static string and a variable. The string is called between the backticks and how the variable is enclosed with placeholders as ${name1}.

The output statement used the variable name1 value. This concept is known as string interpolation.

Let us take another example:

const age: number = 21;
console.log(`John is ${age} years old.`);

Output:

John is 21 years old.

The string uses the variable age with type number. The variable value 21 is used in the output statement.

String Interpolation for Multiple Expressions in TypeScript

String interpolation can also handle multiple expressions.

Example:

let name1: string = "Smith";
let age: number = 20;
console.log(`My name is ${name1} and I am ${age} years old.`);

Output:

My name is Smith and I am 20 years old.

The multiple expression handling is string interpolation.

Notice that two variables name1 and age with the type string and number are enclosed within the placeholder ${}.

Another example for more than two expressions:

let name1: string = "Jack";
let age: number = 21;
let city: string = "New York";
let country: string = "America";
console.log(`Hi there, my name is ${name1}. I'm ${age} years old and I live in ${city}, ${country}.`);

Output:

Hi there, my name is Jack. I'm 21 years old and I live in  New York, America.

String Interpolation for Arithmetic Expressions in TypeScript

TypeScript allows arithmetic logical expressions handling in string interpolation.

Example with a logical expression in a string:

const x: number = 10;
const y: number = 7;
console.log(`The sum of two numbers ${x} and ${y} is = ${x+y}.`);

Output:

The sum of two numbers 10 and 7 is = 17.

The variables, x and y, with the type number, are used in the other expression in the string. The placeholder ${x+y} computes the addition of x and y.

Instead of computing the operation in a string, we can compute the operation and store it in another variable and use the variable inside the string.

Take a look at the below code to understand the concept:

const x: number = 7;
const y: number = 11;
const sum: number = x+y;
console.log(`The sum of two numbers ${x} and ${y} is = ${sum}.`);

Output:

The sum of two numbers 7 and 11 is 18.

Another example with multiple arithmetic expressions:

const x: number = 10;
const y: number = 5;
const addition: number = x+y;
const subtraction: number = x-y;
const multiplication: number = x*y;
const division: number = x/y;
console.log(`The two numbers are ${x} and ${y}. The Addition = ${addition} Subtraction= ${subtraction} Multiplication = ${multiplication} Division = ${division} of the two numbers is computed.`);

Output:

The two numbers are 10 and 5. The Addition = 15 Subtraction= 5 Multiplication = 50 Division = 2 of the two numbers is computed.

The above example shows the basic arithmetic computation of the two numbers. A series of operations are performed, and the resulting values are used in the single string using string interpolation.

A static string now uses a variable. Instead of rewriting the whole code again for a different variable value to print the resulting output statement, the user can now change the variable’s value to update the statement.

String Interpolation for Conditional Expressions in TypeScript

A conditional expression has two conditions, either true or false. A conditional statement operates in this manner as (condition)? true: false.

First comes the expression on which we want to compute. After the question mark ? there are two conditions first is true and the other after the colon : is false.

Example with a conditional expression in a string:

const x: number = 12;
const y: number = 13;
const sum: number = a+b;
console.log(`The sum-total of ${a} and ${b} is = ${(sum==25) ? 'Twenty Five' : 'Addition Error'}.`);

Output:

The sum-total of 12 and 13 is = Twenty Five.

There are a and b variables with the type number. In the string, we have a conditional operator to check whether the sum equals 25 or not.

Let us take an example wherein the condition is false:

const x: number = 12;
console.log(`The number is x = ${x}, which is ${(x==13) ? 'equal to 13' : 'not equal to 13'}.`);

Output:

The number is x = 12, which is not equal to 13.

The condition turns out to be false. So, it was printed not equal to 13.

String Interpolation for String Built-In Methods/Functions in TypeScript

TypeScript allows built-in string methods/functions handling in string interpolation.

Example using a single built-in function length of a string:

let name1: string = "John";
console.log(`The name ${name1} has ${name1.length} alphabets in his name.`);

Output:

The name John has 4 alphabets in his name.

The function length counts the characters of the string.

Let us take another example:

let name1: string = "John Nash";
console.log(`The name ${name1} has ${name1.length} characters.`);

Output:

The name John Nash has 9 characters.

The output above shows the variable name has nine characters. Anything written in a string is considered a character, including the spaces ' '.

An example using of built-in function slice():

let name1: string = "John Nash";
console.log(`The first name is ${name1.slice(0,4)} and the last name is ${name1.slice(5,9)}.`);

Output:

The first name is John and the last name is Nash.

The slice() function takes two parameters. The first is the starting point, and the other is the endpoint.

Now let us take an example with multiple built-in function of the string:

let name1: string = "John Nash";
let firstname: string = name1.slice(0,4);
let lastname: string = name1.slice(5,9);
console.log(`The first name ${firstname.toUpperCase()} is in capital alphabets and the last name ${lastname.toLowerCase()} is in small alphabets.`);

Output:

The first name `JOHN` is in capital alphabets, and the last name `nash` is in small alphabets.

There are two functions toUpperCase() and toLowerCase() which changes the string to upper case alphabets and lower case alphabets respectively.

String Interpolation for Custom Methods/Functions in TypeScript

TypeScript allows string interpolation for custom functions. A custom function is a function created by the user.

Example of simple custom function:

function sum(x: number, y: number): number {
    return x+y;
};
console.log(`The sum of two numbers is = ${sum(5,7)}.`);

Output:

The sum of two numbers is = 12;

The above example shows a custom function sum() taking two parameters x and y of type number is used in a string.

Example 2:

function areaOfCircle(radius: number): number {
    let area: number = 3.14 * radius * radius;
    return area;
};
console.log(`The area of circle is = ${areaOfCircle(4)}.`);

Output:

The area of circle is = 50.24.

The custom function is areaOfCircle() , it takes a single parameter radius. The function returns the variable area.