-: Strings are a very important part of programming.
And so let's now learn about an easy way
to build strings,
using something called template literals.
And let's start by creating
some new variables here about a person,
and in this case, about me,
so that we can then concatenate them
into one big string.
(typing)
And the,
birth year.
Okay, and so let's now use
these variables to build a string,
something like, I'm Jonas,
a 40 or 30 year old teacher.
So we're going to then use this birth year
to calculate the age of course.
So let's call that one,
simply, Jonas.
And as we already learned
in one of the previous lectures,
we can use the plus sign
to concatenate strings.
And so let's now start by doing that.
So, I want to write,
I'm, and here I'm seeing a problem.
So when I want to use this single quote here
for writing something like I'm, or isn't,
so basically when I need this symbol here
then I need to write the string itself,
using double quotes, okay,
because otherwise the single quote
that I'm using here for I'm will finish the string.
So, I'm, and then I need a space,
then the plus.
And so here I'm saying, I'm Jonas,
and now I can actually use the single quotes.
So what matters is that in each string,
we start and finish with the same symbol,
right.
But both just create strings, the same way.
So right now we have, I'm Jonas, comma, A,
and now we want the age,
so let's say, a 30 year old teacher.
So we need another space here,
and then let's actually calculate the age.
So that's the current year
so let's put that here as well,
and let's again say that the year is 2037.
So plus year,
minus the birth year.
Now in order to make this work,
we actually need to put this operation
between parenthesis.
Like this.
And so it will do the calculation first,
and then the concatenation.
But you might be wondering,
well the result of this is going to be a number.
Right?
But the rest of the things
that we're adding here are strings.
So how is this gonna work?
Well, this has to do with something
called type coercion,
which is something that we're going
to talk about a little bit later in the section.
But basically JavaScript will simply
convert this number to a string,
so that it can concatenate them
so that it can join them
with the rest of the strings.
So you will see that it's going
to work just fine.
Okay, years old.
And then,
the job.
Then we can finish with
an exclamation mark or something like that.
Now right, and then,
let's also log this to the console
so we can take a look at it.
Okay,
so, I'm Jonas a 46 years old teacher,
and we're missing some spaces here.
So that's around the years old,
and you see that this is kind of a pain
to manage these spaces
and what to keep track kind of,
of how the sentence is structured.
And so we will see a great solution to that in a second.
So now it works.
And, yeah, just as expected.
So as I was saying,
for a complex string like this one,
this can be kind of a pain.
And so that's why starting with ESXi,
we have a much better tool
for doing this kind of stuff now,
which is called, Template literals.
So with template literals,
we can write a string in a more normal way,
and then basically insert the variables
directly into the string
and then they will simply be replaced.
So basically a template literal
can assemble multiple pieces into one final string.
So let me show you how that works.
So let's call this one,
Jonas
new.
And now to write a template literal,
we need to use backticks.
So that's this symbol here.
And on the English keyboard,
you will find this one above the tab key.
So again, we really need to use these backticks
to tell JavaScript that we're writing a template string,
the single quotes or double quotes won't work
for what we're going to do now.
So now, as I said, we simply write a string
and insert the variables in there.
So I'm.
And then we use the dollar sign, curly braces,
and then the variable name.
So, I'm, first name,
and just to see if this actually works
let's log it to a console.
So that's Jonas new.
And indeed, I'm Jonas.
So you see that this is much easier,
because all we have is this one string,
and then here we used this syntax
to insert the first name variable.
And now we can continue this
and it's going to be a lot easier.
A,
and then again, a variable.
Now in this case, we actually need a calculation,
and that's no problem at all.
We can basically write any JavaScript here
inside of these curly braces.
All right.
Technically, we can write any expressions,
but more about expressions in one of the later lectures.
So year, minus birth year,
just as we did above,
year
old,
and then, teacher.
So no plus signs.
No, thinking where we should put the spaces
like we did here.
And so this is a lot easier,
let's reload.
Oh, and indeed there is a bug here
so of course that's not teacher.
That's actually the value of the variable, job,
that we're interested in here.
But once again, we found this bug,
because we simply read the error message.
So get into this habit of always reading
the error message to try to figure out
where you are wrong. All right.
And now of course it works
and I hope that you can see
that this is a way easier way of writing this string.
This really kind of assembles the string
using the pieces that we give it.
For example this variable here
or this value that is produced by the minus operator.
Great.
So now you know how template strings work in JavaScript,
and in particular in ESXi.
And actually it's one of the most used ESXi features
it's really amazing and really useful in many situations.
Now I just wanted to let you know
that we can actually also use backticks
to write all strings.
So strings, where we do not,
insert any of these kind of placeholders here, like this.
So, we just demonstrated to you.
So we can use backticks for any irregular string.
So, you see that it works here just the same.
And many developers actually started using backticks
for all strings,
because then you don't have to think
about which quotation marks you should use,
you just use backticks, always.
And then in case you need to insert a variable,
then it's much easier than to go back
and switch out the regular quotes.
So that's a choice that you can make.
I actually don't do that myself,
but I can see that it actually makes sense.
All right.
Now another great use case of template literals
is to create multiline strings.
So that's something that,
before template strings was a bit cumbersome to write.
So let me just show that to you.
So if you wanted a multiline string before ESXi,
you would have to write, string, with,
and then you needed this backslash, n,
which in many programming languages means new line.
All right.
So basically this is like a special character in
programming, which in strings,
always means that a new line should be created.
And then in JavaScript,
we would need another backslash like this,
and then we could move to the next line and continue here.
Multiple, let's create a new one,
and then the lines.
And this actually only works because of a bug,
that's in the language.
But let's see.
So we get string with multiple lines,
and you see that it's all the same string
but yeah, spread across multiple lines.
But indeed now with template strings,
there is an easier way of doing this.
So all we have to do is simply hit return,
and it will create a new line for us.
And this is actually going to be immensely useful
later when we start building HTML from JavaScript.
So by then we will be able to use these backticks
to create multiline HTML elements
to insert them onto a page, dynamically.
So that's going to be a lot of fun.
Let's just see if this works,
and indeed it does.
So whenever you need a multiline string,
you always make sure to use this template literal
because it's a lot cleaner.
Alright, and that's actually it about template literals.
In the next lecture,
we will finally start to make or code,
a lot more fun
and take it to the next level by taking decisions.