Original subtitles

This is the third and final part

of Working With Strings.

And let's start by learning about

one of the most powerful string methods, which is split.

So split allows us to split a string

into multiple parts based on a divider string.

So let's check that out.

So any string works here,

let's say

A+very+nice+string.

So let's say

that for some reason we have a string like this

and now on this string we can call the split method.

Here we need to specify a divider string.

So let's just use plus,

and so what will happen now is that it will split up

this string by this plus sign

and it will then store the results

into elements of a new array.

So let's see that,

and indeed we get an array which contains A,

and very, and nice, and string.

So essentially everything's split up by this divider string.

So let's try the same

with my name.split.

And so the goal here is off having one array,

which two elements, one for each name.

And so I can split by the space.

And this is a very common one

and so indeed I get this result

and this is really useful.

Now indeed

we can now actually use the power of destructuring

to create variables directly like this.

So I can say first name and last name

will be the results of this split, okay?

So this here we'll create an array with two elements.

And then from that array,

the first one is gonna be taken into first name

and the second one and two last name, okay?

Now we could have done the same thing with a slice method

but that would have been a lot more complicated

and for longer sentences or almost impossible

and like this it's really straight forward.

Okay, Now let's say that we want to make

the last name uppercase here.

And then we also want to add a Mister in the beginning.

So we could just use a simple template literal

and do what I just said

but I wanna show you something else here.

And that's the joint method

which is essentially the opposite of split.

So let's create an array,

which contains all I just said.

So we want to start with Mr.

Then the first name

and so that's gonna be the second element of this array

and then the last name in uppercase, okay?

And now I want to join this

and again we can specify a divider string

and hopefully you can see by now where this is going.

So let's store the result of this into new name,

and then let's check it out in the console.

So what do you think will be the result of this?

So of the joint method.

So indeed we now get one entire string here.

So one string composed of the three parts of this array

and joined together by this joining string here basically.

And of course we could have used anything else

so like this, or even like this.

So anything works here,

but what makes sense of course in this case

is just the space.

So this combination of split and join is really powerful

and we will actually use this all the time

so split and join, okay?

And in fact, we can use this for something

that we already did in one of the previous lectures

which is to capitalize a name.

But now with this it makes it really easy

to capitalize an entire name with multiple names in there.

So let's say that this passenger is called

Jessica Ann Smith Davis.

So how will we capitalize this name here?

And actually let's write a function.

So that's a bit nicer.

So const capitalize name,

which is a function which receives a name

and then it will do something with that.

So let's capitalize name here with that string instead.

And then we can also call it with some other name.

So my name for example,

and you can use your own name here of course.

So what's the strategy for capitalizing this entire name.

And by the way what I mean here is to transform

the first letter of each name into a capital letter.

So here Jonas, and then this one here Schmedtmnan

with this capital S okay?

Well we have multiple words here,

and so we will have to capitalize all of them one by one.

And so to do that,

it would be good to have them inside of an array

that we can then loop over.

And so now we can use the split method for that.

So let's say names is equal to name, split by the space.

And so this will be an array and now we can then loop

over that array using the four off loop.

So const, let's just call this one word

of names or let's call it N which stands for name,

but I cannot reuse name

because that would then override this

input here and that's a bad practice, okay?

And so now here we will then capitalize this name.

So this individual name.

So remember how we did that in the last lecture

we took the first letter converted that to uppercase

and then joined it with basically the rest of the word.

So that's N.slice

starting from position number one.

So everything except the first letter

which is letter number zero, okay?

And now what should we do with this?

Well, I think we should push this into a new array

so that in the end we end up with an array

with all the names capitalized

and then we can join that array together.

So let's say const names upper

and start it as an empty array.

And then in each iteration

we will simply push into this array.

So sounds good to you, okay?

And now in the end,

let's then log to the console names, upper.

And so now we need to join that array back together

using a space as the separator, okay?

So here we practice a lot of different methods

all in one function.

So this is a really great use case.

So let's now give it a try and indeed it worked.

So great right?

No matter how long a name we feed into the function

it will always give us the correct output.

Now here's a small challenge for you

because there is another way of doing this.

So basically of doing the capitalization of one name.

So given what we already learned

and especially in the last lecture

can you think of a different way of doing this?

And if you can't, it's not a problem at all

but maybe you can pause the video here for a minute or two

and think about this.

So let me just show it to you quickly,

because I think this is really interesting

that we have different ways of achieving the same thing.

And so this time what will we push into the array here

is simply N and then in there we replace the first letter

with the first letter in uppercase.

So let me write that.

So that's N at position zero

and replaced with N at position zero to upper case

let's give it a try and we get the same result, all right?

So again, we are here simply taking the word

and then we replaced the first character.

So that's N at position zero

with the first character to uppercase.

So that's a completely different approach

than this one here,

but it gives us the same result.

Now next up, let's talk about padding a string.

Now padding a string means

to add a number of characters to the string

until the string has a certain desired length.

So padding

and let's just create a message here

go to gate 23.

So now let's take a look at padding here.

So I will take message,

and then I can say padstart

and so this will then add some characters

to the beginning of the string.

And the first argument here is the

length that we want for the string.

Let's say we want it to be 25 characters long,

so after the padding.

And then the character that

we want to pad the string with.

So let's use plus

and let's take a look, okay?

And so you'll see that at edit

all of these here.

And so now the length

of this entire string here

should be 25, okay?

So let me show that to you

with another string here.

So if I said Jonas,

and then the same,

you would see that it would add a lot more

of the plus signs

because the initial string is shorter.

So you see you,

we have a lot more pluses now

but in the end

the string is also a 25

or actually 23

so mistake here.

So now the string is also 25 long.

And so we see here at this

has exactly the same length

as this one here in the console, alright?

Then there's also pad ENT.

And so we can now take the result of this,

and immediately also pad the end of the string.

So pad end

and now let's make it longer

and then again the plus sign.

So this will basically then add

10 pluses to the end of the string

because the result of this string here

is already 25 characters long, right?

And so onto this one

we then pet it all the way

until the length of 35 with some more pluses,

and so we're gonna add 10 of them.

Let's just do a 30,

so we can easily see that,

and so indeed it now added five of them here.

And just for the sake of completion

let's do the same here with my name

and this here just to 20

to make it a bit more even,

alright?

But now let's actually use a more

real world example of padding here.

So when you see a credit card number on the internet,

you never see the entire number, right?

So usually we see the last four digits

and the rest is masked with some symbol.

So let's implement a function that

actually does that masking.

So this is gonna be really interesting.

This is a great application of string methods.

So mask credit cards function.

And so we're gonna receive a number, okay?

So an actual number

and let's start by converting this number to a string.

So string,

now we learned how to convert a number to a string

in the fundamental section, right?

So that was like this, remember?

However, there is a nice trick

that actually makes this easier for us.

So we can just take the number

and then we add an empty string.

And so the result of this

will be the number

but as a string.

And this works

because as you hopefully remember

when one of the operands of the plus sign is a string

it will convert all the operands to a string.

And so then this number will become a string

plus the empty string

and so then it's gonna stay exactly the same, okay.

So in order to know what we should do here

let's one more time

first call the function

before we actually write it

so that we know what kind of input we get.

So mask credit card

and let's say, now the number is this one

and I'm just putting something random here.

But of course it will also work with strings

and no matter how long it is, alright?

So as I was saying,

usually on the internet

we can only see these last four digits

and the rest is masked by some symbol.

So what we need to do here

is basically to take out these four numbers

and then use padstart

to create a string with the same length

as this initial number here

but with some kind of symbol there.

So let me just write that in code,

and then I hope it will become clear.

So we're gonna take the last four characters of the string.

And so, we use slice

with a negative parameter again of minus four.

And now here is what we're gonna return,

we will return a last.

So that is just these four characters.

And then we will Pad it at the start

all the way until the original length of the string.

So string.length

and the character we're gonna use will be this star, okay?

And so since we returned something

to make this function a bit more real

now we need to lock the result to the console

and to start let's actually make

a slightly simpler version

so that we see that it actually worked.

So a shorter number here

with just eight digits.

And so the end should be 7836

and then beginning with four stars.

So let's see,

and yeah, that worked great,

right?

So again, we took the last four here

and then we padded the rest of the string

until it matched the original length of the string

which was eight and therefore four stars were added.

And the same here and to same here.

Awesome.

That's really fantastic application

of this method, I think.

And now to finish the last simple method that I want to

show you is the repeat method.

So repeat

and as the name says,

this one simply allows us to repeat

the same string multiple times.

So let's say there is some bad weather at Wen airport.

So when that happens

they usually have those long messages on the screen,

like with the texts repeating

which then keeps running and repeating all the time.

So let's call this one message.

So let's call it message two

we already have a message up there.

So let's say bad weather

all departures

delayed, okay?

And now we want to

basically create a bigger string

repeating this one here multiple times.

So that's easy enough.

We just take this string

call repeat,

so repeat

and then the number of times we want to repeat it,

let's say five

and there it is.

So this is all the same long string

and we should just add one space here at the end.

And so you'll see

now you can see it even better.

That it's all just one big string

with the same message repeating over and over again.

Or we can also simulate

that due to the bad weather

there are now many planes waiting in line for takeoff.

So let's create a fun function for that.

So planes in line

and here the number of planes.

So console.log

there are N planes in line.

And then here we can kind of show that

graphically using an emoji like this,

let's say plain,

I'm gonna use this one.

And so this here in fact counts as a string.

So let's create a string with that

and then repeat it.

And we will repeat it as many times

as there are planes waiting.

So planes in line

here we have five waiting,

then let's call it on in other airport

where there are just three planes waiting

and then 12.

So indeed, now we have five planes here, three

and here, 12 planes, alright?

Okay, cool.

Now we didn't talk about

all of these string methods that exist

but if you want to check them out,

you can do so on MDN.

And what I like to do is to simply search

for one of the methods,

let's say, string replace

and then that will take me to that page of replace

because then on the left side,

at least when the window is a bit bigger.

So then here we can see all

of the different string methods that we can use.

So we used split, slice, repeat, padstart, pad end.

But as you can see there are even more here

but actually we talked about all of the most important ones.

Maybe one that you can check out is

let's see

concat maybe

or there should one be called reverse.

Well, actually it is not here,

but anyway, as you see we talked about

most of the most important string methods here.

And so I hope you had fun with this.

And I see you in the next video

where we then have a challenge

where you can then use all of

this knowledge that you just gained here

over the past three videos.