String formatting in Typescript can be approached in many ways. This article will introduce four solutions to help programmers format their strings with ease.

String Formatting in Typescript: Four Methods

Method 1. Use The Template Strings

Template Strings entail string literals to allow embedded expressions. These instruments pick up string interpolations via ${  } operators, meaning you can embed any expression.

var name : string = "Geria";
var age : number = 15;

var formedString = `The Princess is of age ${age} and her name is ${name}`;
console.log(formedString);

Output:

"The Princess is of age 15, and her name is Geria"

Note the general “” (or ”) in strings, which facilitates a much cleaner representation of strings. Also, with these template strings, all your on-the-fly processes become more convenient.

var name : string = "Geria";
var age : number = 15;
var animalsKilledPerMonth = 3;
var formedString = `The Princess is of age ${age} and her name is ${name} and has killed over ${age * animalsKilledPerMonth} animals`;
console.log(formedString);

Output:

"The Princess is of age 15, and her name is Geria and has killed over 4750 animals"

You can also use () to generate more multiline strings in the string templates.

var formedString = `Now is the right time
to learn more info about TypeScript`;

console.log(formedString);

Output:

"Now is the right time
to learn more info about TypeScript"

Method 2. Append Strings to Create New Ones

Another great method is to append the strings and create new ones. The concatenation (or +) operator merges two strings together to form one final string.

// string literal
var name : string = 'Geria';
var nameString = 'The Princess is of age 15 and her name is ' + name ;
console.log(nameString);

Output:

"The Princess is of age 15, and her name is Geria"

However, larger strings do not suit this method, so using Template strings will still be better for small strings.

Method 3. Use Environments.TS

We suggest you use anonymous generating functions in the file Environments.TS to pass your variables and generate template strings within that function. An example could be like this:

The Environments.TS file:

export const thisIsA = (str: string) => `That was a ${str}`;

The other file:

import * as env from 'environments';
var text = "bleh bleh";
var strTest = env.thisIsA(text); 

Output:

'That was a bleh bleh'

Method 4. Use String Format

JavaScript String objects do not feature format functions. TypeScript never adds them to its native objects, meaning it does not own String.format functions, either.

That’s why, in string formatting in TypeScript, you should extend String interfaces and supply one implementation afterward.

interface String {
    format(...replacements: string[]): string;
}

if (!String.prototype.format) {
  String.prototype.format = function() {
    var args = arguments;

    return this.replace(/{(\d+)}/g, function(match, number) { 
      return typeof args[number] != 'undefined'
        ? args[number]
        : match
      ;
    });
  };
}

Then use this feature:

var myStr = 'That was an {0} for {0} purposes: {1}';
alert(myStr.format('example', 'end'));

Output:

That was an __ for __ purpose.

Conclusion

This article has introduced four different methods for string formatting in Typescript. For similar Typescript issues (such as converting strings into Date objects), you can turn to other tutorials on this website for more help.