In this video.
Let's talk about.
JavaScript templates literals.
So I can say that the way we are combining or adding string together in this way is old school ways.
There is a new method in JavaScript called template lettre.
Or a way of what?
Doing this in a much better way.
So let me show you what I mean.
So let me comment out this once and now let me have some enough room to talk about JavaScript templates,
literals.
So let me have a comment here and code as JavaScript JS and then template.
Template Literals.
So the same name can be also called as temporary strings, string template and back tick syntax.
Okay, one, one, one name.
We have different names for it.
So let me write down for you here.
One is called the Temporal Trust.
It can be also call us strength templates.
And then you can also call it as back tick.
Syntax.
And then we can also call it as what, temporarily trust or temporary strengths.
Okay.
But after that word it so temperate templates.
Template.
Template strings.
Perfect.
So how can we write or combine string in a nice way?
So for this method, we have a lot of flexibility that can make our life easier.
So let me show you how we can also create a string in a different way.
So let me use the back take.
Syntax is what you call the back tick syntax.
Here we go.
Now let me declare a variable called string as str is equal to.
Remember how we can create a string using the double code or a single code so this or that.
By using the temporarily drives, we use the back.
Take this character or this symbol here and here.
I can write any name inside.
So let me call this one as message for now.
See this one message so I can say that.
Good day.
Brother like that.
So if I console.log message, I'm going to have the same as before.
If I save it.
Because the good day, brother, I have it here.
So if I use this single code.
Or cynical like this one is also the same brother.
But for the back take we have a lot of flexibilities.
For example, we can write double code inside.
DD back take.
So let me declare the same variable here at key.
Let me say const message two is equal to back take.
And now.
Single code or double code?
I can still write it inside.
So let's say good.
Good evening.
Like that.
So I can also bring have to close it like that.
So with this one, when I save it, let me save this one, then console.log this one and see we still
I see the quotation mark on the string that is perfect.
And the cool part is that I can also write the same syntax on a multi line.
So let me show you what is called multi-line string.
So how can I do that?
Okay, so let's say that I want to write some long format messages, so let me comment out this one.
And now here as const.
Cost is my message.
My message is echoed, and I want to write some long messages.
Let's say that we come to our application now and let's take you around how the application works.
We see that sometimes you write on one line, you lose a little bit, but we can do the same thing using
the multi-line syntax, using the template.
So how does it go?
So with this one, after I break back, take our hit enter like that or better so I can even bring it
here like that.
So I can write anything inside this.
I can see that.
Welcome to.
Our application.
And then SpaceX try to make sure.
Try to make sure you.
Have.
And.
Account.
So this one, when I save it, it's going to treat it on one line.
But if I use the double code or single code, I'm going to have some error.
So let's try to console the message here, message and MSG.
When I save it, we see that I have it as before.
That is great.
See I can write it on one line on the multi line.
Perfect.
You see.
How is it.
This one looks nice.
So this, this syntax is commonly used, especially in React.
If you're familiar with JavaScript, library or frameworks, we add components normally use this back,
take to inject some juice into the react component.
That is one part that's one flexibility using the template literals.
And one cool thing I like about template is what it's called the interpolation, meaning that we can
add some dynamic values into it.
So let me show you how this is really important to understand.
We call it as word interpolation.
So let's say that I have a variable called age, which is equal to 30.
And now here I have a message that comes, let's say welcome.
Let me see.
Work on, for example.
WorldCom.
And now we're companies is equal to BackTalk.
And now I can say that.
This is your age.
Then h how can I add some interpretation?
Meaning we can add any I mean logic statement inside this particular interpretation, for example,
we can inject some dynamic value.
So how can I add a number inside this template literature here?
If you are doing it using the the double code you have, you have to do what is called concatenation
using the plus time for this one.
We don't do it that way.
So here you bring in your dollar sign and then your carry basis.
And here I can write any valid.
JavaScript syntax here inside this I mean back to inside this particular I mean temporarily try so here
I would inject I would inject the H.
So if I console.log where.
Come here.
WorldCom.
You see that?
This is your age for this one.
I don't need any spacing.
I don't need anything.
If you are doing this using the concatenation, that is a plus sign.
Let me show you how we are going to do this one.
So let me remove this one from here.
And I have my quotation mark here and my quotation mark here as that.
So let's see, how can I add dynamic value into it?
So for this one, unless I add plus and now the age here like that, let's save it.
And now let's check the console.
So if I search for work, I see that it has been combined together unless I add additional space.
Quotation mark space and then plus.
Now let's check for you.
It's that now it's back to normal.
So this syntax and then this one.
This one.
They say which one is shortest to use and this is how it is the best way to go.
So to be familiar with how to use the template trials, we're going to use this one a lot.
Then this video, let's talk about one method called string length and then you have a.