Published in


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.

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.

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

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

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.

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.

Template literals are a way to allow quotes within strings.

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.

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

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

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.

Now let us use template literals with embedded expressions.

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.

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

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

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.

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.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vincent Tabora

Editor HD-PRO, DevOps Trusterras (Cybersecurity, Blockchain, Software Development, Engineering, Photography, Technology)