Instructor: Hey there, welcome back.
There are big improvements on how we handle strings in ES6
so let's now take a look at the major changes
that happened in strings.
So let's start by creating some data here
that we can work with.
So let's define a name,
and we do so using the let definition, okay.
So we're already using the new ES6 version here
to declare our variables, Smith, okay.
And then this one is gonna be a constant
so the yearOfBirth is a constant because, as we saw before,
it's something that really cannot change.
And we also can create a function here,
and you already know this one,
it's the calculate age function, so calcAge,
and it gets a year, and it simply returns
the current year, let's say 2016
minus the year that it receives on an input.
All right, so the first thing that I want to talk about
is template literals, and that's probably the coolest
new thing about strings.
And I really love this new feature because it really makes
our life easier when working with strings.
So imagine that in the ES5 we wanted to put
all of these data together in a big string.
So let's say console.log,
so This is the firstName,
then we have to use of these plus signs like this.
And for me personally, I find this really annoying.
So firstName and then the lastName,
so John Smith.
And it goes on and on so, He was born in
now on this plus sign again, yearOfBirth,
so Today, he is, and now we can also
calculate the age here.
So of course, we use calcAge and then his yearOfBirth,
years old.
So this was quite some work, right?
So let's check it out in the console.
So yeah, This is John Smith.
He was born in 1990.
Today, he is 26 years old.
Let's just clear this here.
This part was from before.
So again, this our string now.
So again, this is bit hard to write
with all of these plus signs, and it gets really confusing.
In ES6, we have a very cool new thing which is called
template literals, and it works like this.
In order to use them, we now use backticks
instead of the quotation marks that we used before.
So backticks are these symbols here.
All right, so we use these one instead of the quotes
that we used before or the single quotes, right,
so we now use backticks.
And this tells JavaScript that we want
to use a template literal.
Now we can write all of our text and put the variables
right inside of the text,
and this is how it works.
Let's write the same sentence again.
This is, and now we simply can do it like this.
So there's let's say a dollar sign here
and then the curly brackets.
Now we just have to say firstName, and that's it.
Now, lastName, okay.
So let's check this before we continue, and alright,
This is John Smith.
So now we don't have to use all these annoying plus signs
and starting and stopping the strings like we did here,
so all we have to do now is one big string which starts
and begins here with a backtick.
So let's continue our sentence here.
He was born in,
and once again, we do it like this.
In yearOfBirth, and today he is,
and we can actually not just put variable names here
but entire expressions.
We can calculate this age right here inside
of this template string.
So once again we can use the calcAge function here
and it's gonna work just fine, years old.
So now we have the same sentence as before hopefully.
And yeah, it's exactly the same.
So this was much quicker, right, and much easier to write.
This is probably one of the easiest and most straightforward
things to implement right away when you start using ES6,
and it's a huge advantage in fact over ES5.
So this is template literals, but there's more.
So in strings we also have now a couple of new methods.
We talked about some string methods back in our budget
project but now we have some more in a new string method,
so let's take a look at them.
Let's first start by creating a new string,
and I'm just gonna call it name or n actually
which is just gonna be John Smith.
And now we already know how to do that, right?
We just take firstName
space lastName.
All right, so that's how you use some
of the new methods on this string.
The first one that I want to show you is called startsWith.
We can just say n.startsWith
and then, for example, we can say J,
and this is then gonna return if the string
starts with J or not.
And actually to see this we have to console.log this.
So let's see, true, of course, because remember
this one here is John Smith, and of course,
it starts with a J.
If we would put an n in here, it would actually be false,
and also a small j is also false
because it's not the same letter.
I mean it's also a j, but it's not a capital J,
so JavaScript identifies this as something else.
Okay, and such as we have startsWith,
we also have endsWith.
So let's just duplicate this line with Command + D
and then endsWith.
So let's test if your string ends with th,
and remember it's called John Smith,
so we should get true, right, so it makes sense.
If you once again say something else, let's say,
something like this, then of course we have false.
We can test if a string starts with something
or if it ends with something.
What about the middle of the string?
For that we have includes.
We can ask if the string includes something.
Let's for example, ask if the string includes a space,
and what do you think, of course it's true
because remember, and we can check it out here,
and right again, it's John Smith.
Of course, there's an S in here.
Or if we test oh,
and see if there's an oh in this string,
and yeah, we also get true here.
These are three very useful methods
that are now included in ES6.
Okay, and just one more which the repeat method.
Let me also console.log something here,
and what I'm gonna do
is simply say firstName.repeats.
Then we can say how many times we want it to repeat.
So let's see.
Okay, it's not a function and actually it's repeat
and not repeats.
Okay, so my mistake.
But now here it is, so JohnJohnJohnJohnJohn,
five times in a row.
Now imagine we want a space in there,
then we would have to write a template literal
just like this.
Okay, so John John John and John John.
It doesn't look much useful in this case,
but there are some cases that we need it, and that's why
it was also added to the new version of JavaScript.
All right, and that's it with strings in ES6.
For me personally the best thing here is
the template literals, so I really like them.
All right, so let's now move on to another
very important feature that's also very useful
and that's arrow functions.
So come with me right to the next lecture.