Embedded Expressions Using Template Literals In JS

When processing string type elements using Javascript (JS), template literals are used to simplify processing strings. One such feature is the use of embedded expressions. Constructing a template literal makes use of ` (back tic) character to enclose the statement.

The primary focus will be on embedded expressions, but we need to discuss it within the context of template literals. We can begin with some basic examples.

Why Use Template Literals?

Strings can be defined in different ways using template literals. Rather than using ‘ (single quotes) or “ (double quotes) characters to enclose the string, the ` is used. This helps overcome limitations with processing certain strings. For example if you wanted to include the entire word “Johnny” within a string, the use of standard formatting will not work.

let string = "He's often called "Johnny"";

You will get an error message from the environment, because it cannot process the word “Johnny” (in double quotes).

Uncaught SyntaxError: Unexpected identifier 'Johnny'

The error means you cannot use “Johnny” within the string enclosed in double quotes. It will work with Johnny enclosed in single quotes.

let string = "He's often called 'Johnny'";
He's often called 'Johnny'

What if you wanted the string to include the double quotes?

This is where the back tic (i.e. template literals) would be used. Let us write the statement like the following.

let string = `He's often called "Johnny"`;
He's often called "Johnny"

This time you can include the double quotes to enclose Johnny. It is common in strings to have double quotes enclosing certain words. Here is another example of a string with double quotes.

let string = `Alice said, "We are here."`;
Alice said, "We are here."

Template literals are a way to allow quotes within strings.

String Interpolation

The next method is interpolation. In this method, we use placeholders within the string using ${}. This is also for clarity to the programmer, of what they want to include in the string.

Let us take for example processing a string which includes user inputs. We will define 2 variables with values.

const name = "Alice Walker";
const city = "Los Angeles";

We can then use the interpolation method to console log the values to a formatted string.

console.log(`The user ${name}, lives in the city of ${city}.`)
The user Alice Walker, lives in the city of Los Angeles.

This method of interpolation used variable substitution to put the values we defined inside the placeholders.

${name} = Alice Walker
${city} = Los Angeles

Embedded Expressions

Embedded expressions use template literals with string interpolation to substitute values in placeholders. There can be many expressions within strings, and this can be tedious when using string concatenation.

Template literals avoid the use of concatenation operators. This helps to improve the readability of code by using placeholders of the form ${ expression }. This performs substitutions for embedded expressions.

With concatenation operators +, we can process a string in the following example.

const length = 120;
const width = 75; 
// using concatenation
console.log("The area of the space is " + length * width);
The area of the space is 9000

Now let us use template literals with embedded expressions.

const length = 120;
const width = 75;
// using template literals
console.log(`The area of the space is ${length * width}`);
The area of the space is 9000

We get the same result, but it allows a much more efficient way to code, with less use of repetitive characters throughout the formatting of the string. It also makes the code easier to read.

When you have multiple embedded expressions, the use of the concatenation method also gets more complex with bloated coding and thus takes more time to complete (O(n) time complexity). Let us take the same example, but add some more expressions within the string.

const length = 120;
const width = 75;
const area = length * width
// using concatenation
console.log("The area of the space is " + area + ", " + "with a perimeter of " + 2 * (length + width) + ", " + "and length is the area divided by the width which is equal to " + area / width) ;
The area of the space is 9000, with a perimeter of 390, and length is the area divided by the width which is equal to 120

That requires a lot more time to type the statement. Here is the example using template literals for embedded expressions.

const length = 120;
const width = 75;
const area = length * width
// using template literals
console.log(`The area of the space is ${area}, with a perimeter of ${2 * (length + width)}, and "length" is the area divided by the width which is equal to ${area / width}`) ;
The area of the space is 9000, with a perimeter of 390, and "length" is the area divided by the width which is equal to 120

Notice we can also use double quotes within the string (e.g. “length”).

Synopsis

Embedded expressions allow inserting values into formatted strings of text using template literals. In more advanced programs, it can be a simpler way to substitute variables in placeholders.

console.log(`Deploying contracts with the account: ${deployer.address}`);

It also simplifies coding, especially with multiple expressions in a string. Rather than using concatenation operators, placeholders for expressions can be used instead. It saves time and makes code clearer and easier to read.