All language subtitles for 017 Strings and Template Literals.en_US

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.