Template Strings

We will learn how to write a string in ES2015 and use it with JavaScript expressions.

What are template strings?

Template strings in ES2015 offer a third alternative to write a string. Strings can already be declared by using the following two ways:

  1. Single quotation marks: 'Example'
  2. Double quotation marks: "Example"

Since ES2015, backticks can also be used to declare a string: `Example`.

There are two variations of template strings. There are the usual template strings, which can contain JavaScript expressions, and tagged template literals in their extended forms.

Tagged template literals

Tagged template literals are much more powerful than regular template strings because their output can be modified with the help of a special function. However, this is not our primary concern for our usual work with React.

If we wanted to mix tagged template literals and template strings with JavaScript expressions or values, we would use standard string concatenation that was common prior to ES6… Let’s look at an example.

Get hands-on with 1200+ tech skills courses.