How to Format Strings in TypeScript ?

Formatting strings in TypeScript involves combining and structuring text to produce clear and readable output. This practice is essential for creating dynamic and user-friendly applications, as it allows developers to seamlessly integrate variables and expressions into strings, enhancing the overall presentation and functionality of the code.

There are several ways to format the string in TypeScript which are as follows:

Using Concatenation (+)

The concatenation operator (+) joins strings together. In this method, variables are combined with static text to create a final formatted string.

Syntax

let result: string = string1 + string2;

Example: The below example uses Concatenation (+) to format strings in TypeScript.

let website: string = "GeeksforGeeks";
let category: string = "Programming";
let message: string = 
	"Visit " + website + " for " + category + " articles.";
console.log(message);

Output:

"Visit GeeksforGeeks for Programming articles." 

Using Template Literals

Template literals allow embedding variables directly into a string by enclosing the string within backticks (``). The ${} syntax is used to insert variables into the string.

Syntax

let result: string = `String content with ${variable1} and ${variable2}`; 

Example: The below example uses Template Literals to format strings in TypeScript.

let website: string = "GeeksforGeeks";
let category: string = "Programming";
let message: string = 
	`Visit ${website} for ${category} articles.`;
console.log(message);

Output:

"Visit GeeksforGeeks for Programming articles." 

Using eval() function

The eval() function can be used for string interpolation within a regular string. By wrapping the string in backticks and using ${} placeholders, eval() evaluates the expression and replaces placeholders with their corresponding values.

Syntax

let result: string = eval("`String content with ${variable1} and ${variable2}`");

Example: The below example uses the eval() function to format strings in TypeScript.

let website: string = "GeeksforGeeks";
let category: string = "Programming";
let message: string = 
	"Visit ${website} for ${category} articles.";
console.log(eval("`" + message + "`"));

Output:

"Visit GeeksforGeeks for Programming articles." 

Using the String.format Method

While TypeScript does not have a built-in String.format method like some other languages, we can create a custom String.format function to achieve similar functionality. This approach allows for more flexible and readable string formatting by using placeholders in the string.

Example: The following example demonstrates how to use a custom String.format function to format strings in TypeScript.

// Custom String.format function
function formatString(template: string, ...args: any[]): string {
    return template.replace(/{(\d+)}/g, (match, index) => {
        return typeof args[index] !== 'undefined' ? args[index] : match;
    });
}

const template = "Visit {0} for {1} articles.";
const website = "GeeksforGeeks";
const topic = "Programming";

const result = formatString(template, website, topic);
console.log(result);

Output:

Visit GeeksforGeeks for Programming articles.