How to format strings in TypeScript?

In this tutorial, we will learn to format the strings in TypeScript. The string is the sequence of characters in any programming language, and the same goes for TypeScript.

In TypeScript, strings are immutable. The meaning of the immutable is that we can’t change the string character at the particular index, but we can append the character to the string.

Below, we will learn different methods to format the string in TypeScript.

Using the + operator to merge two or more strings

Generally, the '+' operator performs the addition operation of two or more numbers. When we use the + operator with strings, it contacts the strings. Also, it allows us to concatenate the two string variables.

Syntax

Users can follow the syntax below to concat the two or more strings using the + operator.

let result: string = " Hello " + " World! ";

In the above syntax, we have merged the two different strings.

Example

In the example below, we have created three different string variables named str1, str2, and str3. After that, we used the + operator to merge all 3 strings with the fourth string.

In the output, users can observe that the resulting string contains the str1, str2, str3, and "Tutorialspoint" one after another.

//  Creating 3 different strings
let str1: string = "Welcome ";
let str2: string = " Users ";
let str3: string = " to the ";
// merge str1, str2, and str3 using the + operator
let result: string = str1 + str2 + str3 + " TutorialsPoint. ";
console.log(result);

On compiling, it will generate the following JavaScript code −

//  Creating 3 different strings
var str1 = "Welcome ";
var str2 = " Users ";
var str3 = " to the ";
// merge str1, str2, and str3 using the + operator
var result = str1 + str2 + str3 + " TutorialsPoint. ";
console.log(result);

Output

The above code will produce the following output −

Welcome  Users  to the  TutorialsPoint.

Using the template literals to format the strings

One of the best ways to format the strings in TypeScript is to use the template literals. Here, we will use the `` to create the string, rather than using the "" or ''. After that, we can insert a variable inside the using the ${} (template).

Syntax

Users can follow the syntax below to format the string using the template literals.

let var1: string = value;
let var2: number = value;
let result: string = `I'm a ${var1} developer. I'm working with ${var1} since last ${var2} years.`;

In the above syntax, we have created two variables and inserted them into the string using the template literals.

Example

In the below example, we have created two variables, name language and years. We used the ${} to insert both variables between the strings.

In the output, users can see that variables with the template literals are replaced by their value.

//  Creating different variables
let language: string = "Java ";
let years: number = 5;

// Use the template literals to format the string.
let result: string = `I'm a ${language} developer. I'm working with ${language} since last ${years} years.`;
console.log(result); 

On compiling, it will generate the following JavaScript code −

//  Creating different variables
var language = "Java ";
var years = 5;
// Use the template literals to format the string.
var result = "I'm a " + language + " developer. I'm working with " + language + " since last " + years + " years.";
console.log(result);

Output

The above code will produce the following output −

I'm a Java  developer. I'm working with Java  since last 5 years.

We learned to format the string in TypeScript. The simplest approach to format the string is the + operator, but if you want to perform some mathematical operation, you should use template literals. The template literal also allows us to perform a mathematical operation between two variables inside the ${}. So, it’s better to use the template literals.