Template literals (or Template strings ) in Typescript are multiline string literals allowing embedded expressions. You can use multi-line strings, basic string formatting, string interpolation & tagged templates with them. They are part of ES2016/ES6 specification. Template literals are also called as template strings. In this tutorial, we will learn the Template 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 (\)
Table of Content
Template Strings Syntax
The Syntax of template literals as shown below
1 2 3 | `string text ${expression} string text` |
- The expression must be specified inside dollar sign and curly braces
(${expression}) - We must enclose them in template literal syntax or back-tick.
- You must enable the
"target": "es6", or"target": "es2015",in thetsconfig.jsonfile - Template literals always produce strings
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
1 2 3 4 5 6 7 8 9 10 11 | 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).
1 2 3 4 5 6 7 8 9 10 11 | 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.
1 2 3 4 5 6 7 8 9 10 11 | 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, yielding a result in which the expressions are replaced with their corresponding values.
Example
In the following example, $(palyerName) is the expression. It is evaluated first and the resulting value is “Sachin Tendulkar” is replaced at its place in the final string.
1 2 3 4 5 6 7 8 9 10 | //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
1 2 3 4 5 6 7 8 9 10 11 | 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. The expressions are evaluated and coerced to a string.
1 2 3 4 5 6 7 8 9 | 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.
1 2 3 4 5 6 7 8 | let m=11; console.log(`The m is ${(m==10) ?'ten':'not ten'}`); //*** output **** //The m is not ten |
Nesting Expressions
You can nest expressions
1 2 3 4 5 6 7 8 9 10 | 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 literals
The backslash \ is used for escaping inside template literals. It enables you to mention backticks and ${ inside template literals:
1 2 3 4 5 6 7 8 9 10 11 12 | console.log(```) //output ` console.log(`$`) //output $ this is ok console.log(`${`) //Error console.log(`\${`) //output ${ console.log(`\$\{\}`) //output ${} |
Tagged Templates
Another use of 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 converted into a string.
You can read more about it from Tagged Templates in the next tutorial.
Summary
In this tutorial, we learned about Template Strings. They allow us to put embedded expressions inside a string using the syntax ${expression}. We can use any expressions that return in a string. We can also use nested expressions also.
Leave a Reply