Okay then.
So in this video I don't want to introduce another data type.
I want to take a side step and talk about a slightly different version of a string, and that is a template
string.
And what a template string lets us do is inject variables into the string without having to exit out
and using the plus sign to concatenate them.
So what I've done is create three variables right here a title author and likes.
They represent a blog post.
And what I'd like to do is create one big string which contains all of these different variables.
At some point now I'm going to show you the concatenation way and the template string way, and you
can decide which one you prefer.
I much prefer the template string way.
By the way, another name for these template strings is a template literal.
Okay, so first of all, let's do the concatenation way.
So I'm going to create a variable called result and set it equal to a string.
Now to begin with, it's going to say the blog called and then we need to exit out of the string to
concatenate the title.
So plus title, then back into a string and we'll say by then out of the string and we'll say the author
and then back into the string and we'll say has and then out of the string we want the likes and then
finally plus likes like, so I'm just going to press control B and that hides the tree over here for
us so we have more room.
And now this is a gigantic string containing all of these different variables.
The blog called Title, which is this by author, which is Mario has 30 likes.
Okay, So notice how many times we have to come out of the string to concatenate something, then back
into the string, then out, then in, then out, etcetera.
This is very, very messy, but it still gets the job done.
If I say console, dot log and then result, we should still see this in the console correctly.
The blog called best reads of 2019 by Mario has 30 likes, so this works fine.
It just looks a bit messy and it's hard to maintain.
So then let's have a look at the template string.
We remember the job of a template string is to allow us to inject variables directly into the string
without coming out of it and having to concatenate with plus signs like this.
So again, we'll say let result equal something.
Now, this time we don't use single quotes, we don't use double quotes, we use backticks and on a
standard keyboard that should be in the top left below the escape button.
And they look something like this right here.
Okay, little Backticks.
So this is how we create a template string, just like we create a normal string using normal quotes
like this.
A template string is created using backticks.
Okay, so then inside here we can say something like the blog called and I'm just going to put title
here.
We'll come back to this and we'll say by author again, we'll come back to that.
Has likes, likes.
Okay, so what we really want to do is replace these things right here in capitals with the actual variables.
Now, previously we had to come out of the string and use the plus sign to concatenate them, but in
a template string to output a variable, all we do is dollar sign and then curly braces open and close.
And then we put the name of the variable inside those curly braces.
So for example, title and it should have a different color.
Now we'll do the same with author.
So Dollar Curly braces and then author, which is the name of the next variable then likes.
So let's do dollar sign, curly braces likes and this should all work.
And I think that looks a lot better.
We don't have to come out of the string and concatenate anything.
We just embed the variables directly using this kind of syntax and it reads a lot better too.
So let me now console.log the result to the browser and save it and we get exactly the same result.
This still works.
So I much prefer this way, especially when there's many different variables.
If it was just one variable and it looked something like this, first bit concatenation is absolutely
fine and I might do that in the future for something like this.
But when we have a lot of variables, I'm definitely going to be using template strings now.
Then a good use case for template strings is to create HTML templates.
So say for example, we had some kind of dynamic content that we got back from a database and we want
to create an HTML template with that content embedded inside it, then output it to the browser somewhere.
Well, we could use a template string for this so we could say something like let HTML equal to backticks.
This is a template string.
And then what I'm going to do is enter onto a new line now that I'm going to just create some HTML.
So I'm going to say H2 and then I'm.
I'm going to output the title inside the H2 for the blog.
So we'll do our dollar sign curly braces, then close off the H2.
Underneath that, we'll do a P tag and inside the P tag we want to say buy and then the author.
So we'll output that and then close off the P tag.
And then finally underneath that we can say span.
And inside here we'll say this blog has and then we want to output the likes so dollar curly braces,
likes and then likes and then close off.
Oops, it's a span tag like so.
Now then if we were to log this to the console, we should see all of that HTML string.
So if I save it and preview over here in a browser, we can see this HTML string now and we're created
that pretty easily using this template string and injecting this dynamic content.
Okay.
So later on, what I'm going to show you how to do is take something like a template like this and output
it to the browser somewhere.
For now we'll just use the console, but later we'll see how to output it to the browser.
But this is just one use case of using template strings.
