Template Literals in JavaScript

Introduction

We've already seen the traditional way of writing strings in javascript. Now imagine we are writing a program that takes a user's name and their maths and science score and returns a statement that states their name and score. For e.g., if the user inputs Jon as his and and 10, 11 are his maths and science score, respectively, then the program will return: 'Hi Jon, your total score is 21'.

To achieve the above result by the traditional string method, we have to break the resulting string into parts. We would take a string Hi and then concatenate it with the name input using the + operator. Then we will concatenate the , your total score is string to the result string, and in the end, we will do the sum mathScore + scienceScore and concatenate the sum to the resulting string. It would look something like this:

Template literals javascript can be used to write the above expression in an easier way. Template literals in javascript are literals declared using backticks(``) within which we can write stings and add placeholders within the backticks(``). This placeholder can contain variables or expressions; by default, the template literal returns a string expression. These are also known as untagged template literals. We can also call a function and pass the string as an argument, these are known as tagged template literals.

The backtick(``) key is present on the top-left of the keyboard.

Syntax

The untagged template literals are simply declared by using backticks (``). The untagged template literals would simply return a string.

The ${ variable } is used to place placeholders in template literals. The variable inside the braces is the placeholder, and it can be the value of any data type.

The func before the template literal in a tagged template literal is tagged template. It is generally a function that gets called when we declare the tagged template literals, with the template literal as an argument.

Description

Template literals are ES6 addition to Javascript that allows users to embed expressions. These expressions can be a number or a string or a variable or constant of any data type in Javascript.

The template literals are declared by using backticks (``). By default, the template literals concatenate its parts into a string. These strings are also known as dynamic strings, as they could include variables placeholders whose values can be changed.

The placeholder in template literals are declared by ${}. The placeholder can be placed inside the braces, and it can be a constant or a variable or an arithmetic expression, etc.

The template literals in Javascript support multiple features like multiline strings, nesting, expression interpolation etc.

The template literals in Javascript are mainly of two types:

Untagged template literals:

The untagged template literals javascript concatenates the whole expression and returns a string. It simplifies string interpolation (for e.g. before the introduction of template literals, in order to place a numeric value in between a string, we have to divide the string into two parts and then concatenate the strings and the numeric values using the + operator, whereas in untagged template literals we can simply insert variables and expression using ${}).

Tagged template literals:

The tagged template literals allow us to call the tagged template as a function.

We have discussed the tagged template literals javascript in much detail with examples in the below section.

Multiline Strings

It's a common practice to write text pieces in multiple lines. In the traditional strings (which is declared by using '' or "" in javascript), this could be achieved by using \n.

For Example

In the above example, the compiler, while logging through the string before the + operator encounters the \n, thus it changes the line before printing the string after the + operator.

The above result can be achieved by the untagged template literals without adding any \n. We can change the line of the string output by simply changing the line of the string inside the (``) during string declaration.

Example:

In the above example, we can see that the line of the string output has changed when we have changed the line of string inside the backticks (``) in the declaration. This is the multiline string property of template literals javascript.

Expression Interpolation

The template literals Javascript support expression interpolation, i.e. we can embed placeholders or expressions in between the string.

In traditional strings, in order to add and expression to the concatenate the expression using + operator. For eg,

In the above example, the variables name, mathScore, scienceScore are concatenated with the strings to produce the output. This is the express interpolation property of template literals javascript.

The above result can be used by using ${} inside the template literals. We can place the variable or expressions inside the braces and it will substitute the variables and expressions with their values.

Example:

In the example the variables name, mathScore and scienceScore and the expression mathScore + scienceScore are substituted by their respective values. Also, the line is changed in the output as we have changed the line within the backticks.

Nesting Templates

Nesting templates mean including a new template literal within a template literal. Template literals in javascript allow the nesting of templates, i.e., we can declare a new template literal inside a template literal.

Nesting templates come in handy in situations where there is multiple condition checking. It can be used to nest conditional operators.

Templates are nested by declaring backticks strings inside a template by using ${}.

Example:

In the above example, the first inputs are a = 1, b = 2, c = 3, now the (b<a && b<c) expression will be return false as b > a, thus the conditional operator will return ${(a<c) ? a:c}. since a < c so the second operator will return a. The the final result will be min value is a. Here we can see that the program first iterates through the outer template, since the (b<a && b<c) condition returns a new template so it goes inside that template and appends it's output to the final result.

In the second case, the input are a = 2, b = 1, c = 3. Now the (b<a && b<c) expression will be return true as b < a and b < c. Thus the conditional operator will return the inner template literal b, which will get appended to the reslting string.

In the third case, the inputs are a = 2, b = 3, c = 1, now the (b<a && b<c) expression will be return false as b > a and b > c, thus the conditional operator will return ${(a<c) ? a:c}. since a > c so the second operator will return c. The the final result will be min value is c. Here we can see that the program first iterates through the outer template, since the (b<a && b<c) condition returns a new template so it goes inside that template and appends it's output to the final result.

Tagged Templates

The tagged templates can be used it parse template literals with a function. The tagged template before the string calls the function, and the string values are passed to the function as an array of arguments. If there are substitutions in the string, then these substitutions are passed as the next arguments.

Example:

In the above example, the func is a tagged function, which is called with the template literal ${name} has scored${mathScore} in maths and ${scienceScore} in Science. Thus his total score is =.

The func function gets called with four arguements: str, userName ,mathS, scienceS

The str is an array of string elements that is in the literal. // ['has scored ', 'in maths and ', 'in Science. Thus his total score is = ']

The userName does takes the value of ${name} Similarly mathS and scienceS will take the values of mathScore and scienceScore respectively.

The str elements are accessed through their indexed and stored in s1, s2, s3.

The function adds these score and stores into a variable totalScore and then returns the expression.

${userName}${s1}${mathS}${s2}${scienceS}${s3}${totalScore}$

Where the values if placeholders are substituted.

Raw Strings

We've already seen how \n can be used to change the line of a string. Similarly, we can use other escape sequences to skip lines, spaces, etc.

The raw is a property of the first argument of the tagged template that allows us to access the string in the exact same way they were entered (i.e. the escape sequences like \n, \t are also simply considered as a string).

Example:

In the above example, as we all know in template literals javascript, the first argument of the tagged template in template literals javascript is the array of string values that are passed, the str is an array with This is an example of:\n Raw strings as its value.

Now, the str[0], will output the string value. While printing the string, it encounters \n thus, it changes the line and prints the rest of the string.

Similarly, the str.raw[0], will output the string value. While printing the string it encounters the \n as well, but due to the raw property, it considers the \n as a string only, thus it doesn’t change the line, prints \n and keeps printing the string.

Tagged Templates and Escape Sequences

The ES2016 behavior:

According to ECMAScript 2016, the tagged templates in template literals javascript are bound to follow the mentioned rules for escape sequences:

• The Unicode escapes should start with "\u".
• The Unicode code point escapes should be indicated by "\u{}".
• The Hexadecimal escapes should start by "\x".
• The Octal literal escapes should start by "\0o" and should be suffixed by one or more than one digit.

ES2018 revision of illegal escape sequences

In 2018, the provisions were revised in template literals javascript. It was proposed that Template literals should allow the embedding of languages. This revision removed the syntax restriction of `ECMAScript escape sequences.

Browser Compatibility

• If the row contains a number (for example, 1 for Firefox), it indicates that the browser version specified is the bare minimum required to support the tag in template literals javascript.

• N/A means the browser doesn't support the feature.