Original subtitles

Over the next few lectures,

we will learn how to work with strings

and so we're gonna be taking a look

at a couple of useful string methods.

Now I could have divided this part about strings

into many more lectures

and go really deep into some topics

but I think it's best to just quickly introduce you

to all the topics here

and then keep using them in future projects

because we work with strings all the time in JavaScript

and so you will see these methods being used

all the time throughout the rest of the course.

Anyway, this is gonna be really fun

so let's get started.

And in this part of the section,

we're gonna leave the restaurant theme behind

and work on stuff related to airplanes and airlines.

So that's something that I really like.

So let's now start by creating an airline variable here

and I'm using TAP Air Portugal.

All right, and if you want, you can use some other one

from your country maybe,

but then you might have to adapt the examples.

So as a plane,

I'm using a string A320.

Okay.

And now let's do some stuff with this.

So just like in arrays,

we can get the character of a string at a certain position.

So for example, plane at position zero

should be A, right?

So let's load this here.

And indeed we got A

and the same of course for all the other letters,

one, two for example.

And so indeed you now get three and two here

but both of them are still strings.

So if we wanted them to be numbers,

we would have to convert them and we can do the same

directly on a string.

So we can just write a string and let's write B727 now,

which is a Boeing and so this works the same.

Okay so now we got to the B,

we can also read the length property of strings,

just like we can in arrays.

So let's say airline.length.

And again we can also do that directly on the string.

Okay.

There you go.

Next up let's talk about methods.

So again comparing strings to arrays here,

strings also have methods

and some of them are quite similar to the array methods.

So one of them is the index off.

So I believe we talked about this one

when we talked about a array.

And so this one works the same way,

so we can get the position in which a certain letter

is in the string.

So let's use r here.

And so here we now get to position number six.

And so let's see zero, one, two, three, four, five and six.

Okay and that's where the six here comes from.

So you'll see that strings are also zero-based right?

And we could observe that already up here.

Now this here will only give us the first occurrence

but sometimes we might need the last one.

And so then we can use lastIndexOf,

lastIndexOf and so that is 10.

So this one was six then seven,

because the space of course also counts as a character,

then eight, nine, and this is position 10.

Alright and we can also search for entire words.

For example, for the occurrence of Portugal,

and so that is at position eight,

and this one is actually case sensitive.

So if I search with lowercase,

then we get minus one,

because this can now not be found

in this airline's string.

All right now, what can we actually do with these indexes?

Why are they useful?

Well, one good use case is to extract part

of a string using the slice method

and a slice method needs indexes as arguments.

And so therefore sometimes it can be very useful

to first figure out the index of part of a string

to then extract that.

So let's see how the slice method works.

So airline and then dot slice,

and let's write four and see the result here.

All right so the result is Air Portugal.

And the reason for that is that this here

is the begin parameter.

So basically it's the position at which

the extraction will start.

And remember that this is zero based.

So zero, one, two, three, and four.

So four happens to be this A.

And so this is where the slice method starts to extract.

And this result that we get here,

so just this here is called a substring

because it's just a part of the original string.

Now this does not change the underlying string okay?

Just keep that in mind.

That's because it's actually impossible to mutate strings.

They are primitives, right?

So if we wanted to use this string

now we would have to store it first into some variable

or some data structure.

Okay, so this method here and all the other ones

that we're gonna talk about always return a new string.

Okay and so that's why we can then lock that result

to the console like this.

Now, besides the begin parameter that we already specified,

we can also specify an end parameter.

So let's try seven and see the result.

And so now we only got air.

Okay so this one is four, then five, six

and seven is the space here.

And so what this means is that the end value

is actually not included in the string.

All right so basically it stops extracting

before reaching index number seven.

And that's really important to keep in mind.

And just as a side note,

the length of the extracted string

is always going to be end minus beginning.

So seven minus four is three.

And so that's the length here of air.

All right, okay.

Now up until this point,

we have always just hard-coded these values,

but ofcourse many times we don't even know the string

that we receive yet okay?

And so let's now try to extract just the first word

of this string here,

but without knowing any of the indexes.

And so that's where this IndexOf,

and lastIndexOf here become really important.

So basically that we do not have to hard code

these values here.

All right so let's try to extract that first word

as I was saying.

Airline.slice

and now we need to figure out the index.

And now if we want the first word we need to start at zero,

but what about the end parameter?

Well we want to extract until this space here basically.

So let's find the index of that.

So airline.indexOf,

and remember that this will be the first occurrence

and so indeed we get top.

All right and now let's do the opposite extracting

the last word, so slice.

And so for the last word,

we want to start at the last space here.

Okay that's why we have lastIndexOf.

So airline.lastIndexOf

and again searching for the space.

And now we don't need the end parameter

because then if we don't specify it,

it will simply extract everything until the end.

Okay.

But actually now the space is also included here.

And so we just need to add plus one,

and now we're good.

So that's the fundamentals of the slice method,

but we can do even more with it.

So let's go again here.

And we can even define a negative begin argument.

Like this for example,

and then it will start counting from the end.

Or actually start extracting from the end.

So these are the last two letters from Portugal.

And finally let's duplicate this one again.

And again I'm using this shortcut here for duplicate.

Okay.

So we can also specify a negative end parameter.

So the beginning is back to positive,

and now the end is minus one.

So let's see.

And so basically we started at position one.

So that's why the T is cut off.

And then the negative end parameter,

basically cuts off the last character.

All right.

And so we will need all of these

different combinations here,

in different situations.

So it's good that you know how to use them,

because you will need them at some point.

Okay.

And now let's practice a little bit,

what we just learned

and write a function that receives an airplane seat

and locks to the console,

whether it is a middle seat or not.

I hope that sounds like fun.

So let's write.

Check,

middle,

seat.

And it is a function which takes in a seat.

And just to illustrate it,

let me start by calling this function.

To check middle seat.

And so typically,

an airplane seat looks like this.

So we have the row as a number here

and then the seat itself,

so that's like the column so to say,

it's then a letter for example a B.

So it starts from the left

and goes all the way to the right side.

And in small planes, like the A320, or the Boeing 737,

we only have six seats in one row.

And that means that B and E are the middle seats.

Let me just write that here.

B and E,

are middle seats.

So just in case you're not familiar

with how these small planes works.

Right.

And that's also not the point here of course.

So basically all we want to do is to check

if the string that we receive,

contains a, B or an E.

And if so, then it's a middle seat.

And let's call this with a couple of different strings.

So 23C

and 3E.

All right, so what we need to do here is basically

take the last character of the string

and test whether it is a B or an E right?

So let's get that letter from the seat.

Now we'll just call it S for seat again,

but I cannot repeat the same name here.

So how do I do that now?

Well to extract part of a string,

we already know we use the slice method

and how do we take the last character of a certain string?

Well, we use minus one as the begin character.

And then as we saw up here,

it will start counting basically one from the right side.

And now it's very easy.

If S equals B

or if S equals E,

then let's log to the console,

you got the middle seat,

which is the one that no one wants.

Well, let's add an emoji here.

Let's say this one

or else

you got lucky,

just any emoji here,

just to make it different

and I think we are good now.

Let's test it.

And so indeed this here contains the B at the end.

And so therefore it's a middle seat,

the same for this one

and this person with this seat got lucky.

All right and that's how we extract parts of strings.

And that's something really important to do.

So maybe if you'd like,

you can play around with this some more,

maybe come up with your own example.

Now before we move on here,

let's just stop for a second

and understand why all of this actually works.

So we know that strings are just primitives.

So why do they have methods?

Shouldn't methods only be available

on objects such as a race?

Well that is actually true.

However, JavaScript is really smart.

And so here is how this works.

Whenever we call a method on a string,

JavaScript will automatically behind the scenes

convert that string primitive to a string object

with the same content.

And then it's on that object where the methods are called.

All right and this process is called boxing

because it basically takes our string

and puts it into a box

which is the object.

So basically what happens is this.

So what JavaScript does,

is to call this string function here.

Okay.

And so now you'll see, that this string here,

looks a little bit more like an object.

And we could take a look at this here.

And so you see here, all of these methods,

like slice that we just use.

But this is beyond the scope of this lecture.

We will learn what this is a little bit later.

But what matters is that this indeed is now an object.

So you see it is an object.

And so this conversion here

is what JavaScript does behind the scenes

whenever we call a method on a string.

And then when the operation is done

the object is converted back to a regular string primitive.

Okay.

And in fact all string methods return primitives.

Even if called on a string object.

So let me demonstrate us here as well.

Just really quick.

And actually we want your type off.

And so the result of all of this,

is then back to being a string.

Okay, but don't get confused by this.

This is just a theory explanation

behind why all of this works in case you're curious.

And I hope you are.

Great.

But now let's move on to the next video,

where we will continue working with strings.