‫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 here, 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 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 back ticks.
‫And, if you're using an English keyboard,
‫they are just above the Tab key
‫on the left side on the keyboard.
‫So these back ticks 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 say 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
‫'cause, otherwise, we would have to write book.title,
‫then here book.pages and so on
‫for all these variables that we're going to use here.
‫So we said 1,216-page long book
‫was written by...
‫Now, let's use the author here.
‫And, again, we took that one out using destructuring.
‫And published in...
‫Now, here we can use our publish date
‫or actually I think it's called publicationDate.
‫Alright, so then, here,
‫sometimes the string becomes a bit too long,
‫and in that case, I'd 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 Quokka.
‫Alright, 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 the 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.