All language subtitles for 4. Template Literals

In this lecture.

Let's review template literals.

So template Literals are an ES6 JavaScript feature which allows us to very easily create strings that

contain some JavaScript variables or actually that contains any JavaScript expression inside of a string.

So let's illustrate that by using some of these variables that we have created here in the beginning.

So like some of these hear about this book in order to create a summary string of the book.

So creating a string that contains a summary of the current book object.

So let's create a summary.

And here is where we will have our string.

Now, usually strings in JavaScript are defined with normal quotes.

Like this or with double quotes.

Right.

However, template literals are with these backticks.

And if we're using an English keyboard, they are just above the tab key on the left side on the keyboard.

So these backticks indicate to JavaScript that this is a template literal.

So for now, let's just write anything here, and then I will.

Immediately write it out here again so that Quokka can display the result of this variable here.

And so for now, we see that this is still a normal string, as if it had been defined with the normal

quote.

But now let's actually add some JavaScript expression in here.

So for that we use this dollar sign and then curly braces.

So let's see.

Title is a book.

And indeed, this title right here, or in fact any JavaScript that is in here inside of this block

is then replaced in the string with the value that this block basically returns.

So the value that is created here.

And so title is, of course, Lord of the Rings.

And so then in the string we see The Lord of the Rings is a book.

So let's try something else here.

So as I was saying, any JavaScript expression works here.

So we can do two plus four or really whatever we want.

We can call functions here and really anything that is an expression.

So anything that immediately produces a value can be placed here inside this block.

Okay, but now let's create a little bit more of a nice looking string here.

So let's say The Lord of the Rings is a book with a certain number of pages.

So here we can use the pages variable, which remember we took out of the books object using destructuring.

And so now you start seeing why it is so helpful because otherwise we would have to write book title

then here, book dot pages and so on for all these variables that we're going to use here.

So we say 1216 page long book.

Was written by.

Now, let's use the author here.

And again, we took that one out using the structuring.

And published in.

And now here we can use or publish date or actually, I think it's called publication date.

All right.

So then here, sometimes the string becomes a bit too long.

And in that case, I just like to scroll down here and see the output right here in this panel here

on the bottom.

And by the way, in case that your quokka didn't open up this panel, you can always open it up by opening

the terminal, which should be.

Right here so you can do a new terminal.

Like this.

And then you see that here you have the problems tab, the output tab, and then here you can just select.

All right.

So here we have this string now, and here we have the publication date.

But here I just want the year and so let's just take out the year.

And so this is again to show you that we can write any JavaScript expression here inside these curly

braces.

So let's say we want to split this string by this dash which will result in an array.

And then from there we just take the first element.

So that's just standard JavaScript.

And so now indeed, here we get a string as we want it.

Great.

And that's actually all I had to tell you about template literals.

That's just how easy and straightforward they are.

But we use them really all the time in React.