Template Literals (Template Strings) in ES6

Tram Ho

1. Introduction

Template Literals (aka  Template Strings) is a new feature of ES2015 (ES6) that allows you to work with strings in a novel way than in ES5 and below. It adds many powerful new features to make it easy to create multi-line strings or embed expressions in strings. In addition, Tagged Templates Literals is an advanced feature of Template Literals that allows you to perform operations on expressions in strings.

All those cool features give you more options when dealing with strings, allowing you to easily create dynamic strings that can be used for URLs or custom functions in HTML elements.

2. Syntax

As you have seen above, Template Literals are surrounded by the backslash character backtick () instead of single or double quotes.

Template Literals can contain “placeholders”. They are indicated by dollar signs and curly braces ${expression}

The can be escaped with a :

=== ‘`’ // –> true

You can put any JavaScript expression inside ${}

Results:

image.png

Results:

image.png

3. Multi-line Strings

Any newline characters inserted into the source are part of Template Literals.

If you use regular strings, you’ll have to use the following syntax to get multiline strings:

When using Template Literals, you can do something similar to the following:

4. Expression Interpolation

To embed expressions in regular strings, you would use the following syntax:

Now, with Template Literals, you can make it more readable as follows:

5. Nesting Templates

In some cases, nesting a template is the easiest (and probably more readable) way to get configurable strings. With Backticked Template, it’s simple to allow inner backticks by using them inside placeholders ${}.

6. Tagged Templates

A more “advanced” form of Template Literals is Tagged Templates.

Tags allow you to parse Template Literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to expressions.

Tag function can do any operation on these arguments you want and return the manipulated string.

The name of the function used for the tag can be whatever you want.

Besides, tag function doesn’t necessarily return a string, it can operate on those and return any value type. The following example tag function can ignore everything and return null:

Another example of an action that can be taken in Tagged Templates is applying some changes to both sides of the expression. For example, you want to wrap each expression in tags HTML, specifically here is creating a function higlight to wrap the expression in a pair of tags <span></span> for the convenience of adding CSS properties to it.

Results:

image.png

7. Raw Strings

Properties raw in particular, available on the first argument of tag function, allows you to access raw strings as they are entered without dealing with escape sequences escape sequences

Not only that, there is a method String.raw() to create the raw strings

8. Browser Compatibility

  • Desktop
ChromeEdgeFirefoxInternet ExplorerOperaSafari
411234No support289
  • Mobile
WebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
4141342894.0
  • NodeJS: 4.0.0

9. Conclusion

Through this article, I hope to help you understand and apply it Template Literals serve to make manipulating strings easier and more convenient. This is my first post, if there are any mistakes, I would love to receive your comments and suggestions in the comments section so that I can improve in future articles.

Thank you everyone for reading my post. Happy Coding

10. Reference

Share the news now