Template Strings, String interpolation & multi-line Typescript

Template strings (or Template literals ) in Typescript are multi-line string literals that allow string interpolation. String interpolation allows us to include embedded expressions as part of the string. Template strings allows us to create multi-line strings, basic string formatting & tagged templates. They are part of ES2016/ES6 specification. In this tutorial, we will learn the Template strings (or Literals) syntax and how to use it in Multiline Strings & string interpolation. We will also learn how to nest expressions and how to Escaping template literals using the backslash (\)

What is Template Strings

Template literals are literals delimited with backticks ` instead of single quote or double quotes.

The following is the syntax of template literals

`string text ${expression} string text`

1. We must enclose them in template literal syntax or back-tick.
2. The expression must be specified inside dollar sign and curly braces (${expression})
3. You must enable the "target": "es6", or "target": "es2015", in the tsconfig.json file
4. Template literals always produce strings

The following is an example of Template string

`Hello & Welcome to Tutorial on Template Strings`

What makes them powerful is you can include a embedded expression within them. We must include the expression inside a dollar sign and curly braces (${expression}). In the following example ${name} is an expression. The Typescript evaluates it and replaces its value in the its original position.

`Hello ${name}, Welcome to tutorial on Template string`

Multiline strings

The following is an example of creating a multiline string. Just hit enter and continue in the next line. The \n character is automatically gets inserted in the string.

Example

let sentence: string =`Hello, welcome to the world of typescript,
the typed super of javascript`

console.log(sentence);

//**** output ****

//Hello, welcome to the world of typescript,
//the typed super of javascript

The multiline strings without back-quote are created by inserting a \n newline character (LF).

let sentence: string ="Hello, welcome to the world of typescript,\n"+
          "the typed super of javascript"

console.log(sentence);


//***output****
//Hello, welcome to the world of typescript,
//the typed super of javascript

As we said earlier, the /n (LF) character is inserted when you use the template strings. Hence the following code is true.

const str = `Line1
Line2`;
console.log(str);
console.log(str === 'Line1\nLine2');       // true

//***output***
//Line1
//Line2
//true

String Interpolation

String interpolation (expression Interpolation) is the process of evaluating a string literal containing one or more expressions. It evaluates the expression and coerces the result into a string. The result is then is replaced in the original string.

Example

In the following example, $(palyerName) is the expression. It is evaluated first and the resulting value “Sachin Tendulkar” is replaced at its place in the final string.

//Works only with ES6/ES2015 and above
let playerName:string = "Sachin Tendulkar";    
console.log(`${playerName} is the greatest cricketer of all time`)



//**** Output ****
//Sachin Tendulkar is the greates cricker of all time

Multiple Expressions

const firstName = 'Students';
const topic ="Template Literals"
console.log(`Hello ${firstName}!
Welcome to the ${topic} tutorial`);


//*** output ****
//Hello Students!
//Welcome to the Template Literals tutorial

Using Expressions

The following example shows that you can use any expressions inside the template string. It uses the arithmetic expression ${a+b}

let a=1;
let b=2;
console.log(`The addion of ${a} + ${b} is ${a+b}`);


//***output ****
//The addion of 1 + 2 is 3

The following example uses the ternary conditional operator(?) in the template string.

let m=11;
console.log(`The m is ${(m==10) ?'ten':'not ten'}`);


//*** output ****
//The m is not ten

const MAX = 100;
 
function doSomeWork(x) {
  if (x > MAX) {
    throw new Error(`At most ${MAX} allowed: ${x}!`);
  }
}
 
doSomeWork(200)

Nesting Expressions

You can nest expressions

let x=10
let y=20
let varxy=`${x+y}`      //template string
console.log(`The addion of ${x} + ${y} is ${varxy}`);    //tempate string nested


//*** output ****
//The addion of 10 + 20 is 30

Escaping in template strings

The backslash \ is used for escaping inside template literals. It enables you to mention backticks and ${ inside template literals:

console.log(`\``)     //output   `

console.log(`$`)      //output   $    this is ok

console.log(`${`)      //Error

console.log(`\${`)     //output  ${

console.log(`\$\{\}`)   //output  ${}

Tagged Templates

Another use of the Template string is in Tagged Templates. We can tag a function to a template string. This gives an opportunity to parse the template literals and control how it gets converts into a string.

You can read more about it from Tagged Templates in the next tutorial.