Introduction to JavaScript Template Literals. Template Literals, also known as Template Strings, are an easy way to interpolate variables and expressions into strings. On the screen, I have an instructor object with two properties, name and email. Using traditional string notation, I'm gonna console log so the instructors name is, and using pre ES6 syntax, I need to use shrink and catenation to combine the value of a variable with a string. So I need to write the plus symbol next, then instructor.name, which is the value from the instructor object.

Note because I'm using single quotes to denote that this is a string, I need to escape the apostrophe where the letter S is located at. I will execute this and on the right, we can see the instructor's name is Farish, which matches my expectation.

Now I wanna use a Template Literal to recreate the string. I will write console log, and now, instead of using quotes, I will begin with back ticks, which is what is used to tell JavaScript that I am writing a Template Literal. I will type the instructor's name is, and I'm gonna pause for a moment. Now because I'm using back ticks, I do not have to escape the apostrophe here. From this point, in order to access the value of instructor.name, I have to use a string expression. This begins with a dollar sign, then curly brackets, and inside of the curly brackets, I will write instructor.name. And now I'm gonna execute this. And the message is the same as before.

The use of Template Literals allows for a more natural writing style. I'm gonna add to the console log by typing, and, and I'm gonna hit enter in order to fit this on the screen, but also to demonstrate something else about Template Literal. His email is, and now a new string expression, dollar sign, curly brackets, instructor.email. And I'm gonna go ahead and execute this, and if you look at the output, you'll notice that his email is, is on the following line. Template Literals will match how you write the string, what you see, how you wrote it is what you will get.

For further emphasis, I'm gonna add another line break before the email string expression. And the result on the right matches exactly how the string was written within the Literal.

Are there other use cases or options with Template Literals? Well, there is a advanced form of the Template Literal, referred to as either a tag Template Literal or a tag function. And this works by creating a function and then executing it with a template string. I will begin by creating an arrow function, const instructorInfo =, and I'm gonna give it three parameters. Sdr, which is short for string array, name and email. Inside of this function, I will constant log a template string with the string expressions of name and email.

For now, I'm gonna ignore the first parameter. Tag functions are invoked differently than traditional functions. I will write the function name and instead of passing through arguments, through parentheses, I need to use a template string. So beginning with back ticks and inside of the back ticks, I will pass through the string expressions of instructor.name and instructor.email. And when I execute this, the console log is displaying the name and email. So this leads to an interesting question.

How was the string array argument avoided? The answer is, it isn't avoided. I'm gonna go back into the function and console log str, and I'll execute this function again. And in the console, there is an array of empty string values. So what exactly is happening here? Well, let's take a deeper look. A tag function allows you to parse Template Literals. The purpose of the string array is to store text segments to be parsed by the Template Literal. What is a text segment? It is any block of text that comes before or after a string expression. The tag function has no text segments. Looking at the string array, any missing text segment is represented by an empty string as an element in the array. This allows for parsing of the Template Literal when a text segment doesn't exist allowing the function to work as normal.

Diving into the string array a little further, the first element of the string array always represents the texts that comes before the first string expression as shown here. Then the last element of the string array always represents the text that comes after the last string expression. The element in the middle of the string array is the text segment that comes between the first and second expression. Now this array skills based on the number of string expressions in the tag function.

The first and last elements will still represent the same text segments, but in between those two elements, there will be additional elements that will represent the text segment between each additional expression as shown on the screen. And you can access each text segment from the string array using that text segments index value. I will demonstrate this. Before I can demonstrate this, I need to add a couple text segments to my tag function. Before the instructor's name, I'm gonna add to the string, the instructor's name is. And inside of the string array is the segment of text that occurred before the first string expression. After the instructor's name string expression, I'm gonna add another text segment. And his email is, and I will execute this again, and we can see this as the middle value of the string array.

Now, inside of the tag function, I'm gonna access the first element of the string array. Inside of the console log, inside of the instructor info function, I will add the string expression, sdr at index of zero. And I will execute this and we can see now that the instructor name is Farish. Using that string array text segment as part of the outcome for the tag template function. So there's a lot of use cases for tag Template Literals. In fact, they make up the foundation of a popular JavaScript framework, Style Components. Without this feature, Style Components cannot exist.

Another feature of Template Literals is the ability to execute operations within a string expression. On the screen I have a variable named value. That equals 10,000, and there's a function name double that will return the argument pass through times two. First using the string expression, I'm gonna console log the value variable, which equals 10,000.

Now using this as a basis, any operation can be performed inside of a string expression. I'm gonna multiply value by two. And when I execute this, the value is 20,000 and string expressions can work with direct mathematical operation. I'm gonna replace value with four, and on the right, the result is eight, meeting expectations. Also within string expressions, I can invoke functions. I will replace what's currently in the string expression with the function called double, passing in an argument of value. I will execute this again and to the right, there's a value of 20,000. And that's it. Thanks for watching at Cloud Academy.