All language subtitles for 110 Slicing and Extracting Parts of a String.en_US

All right guys.

So, in keeping with our previous theme of creating the Twitter character count functionality, we want

to improve this a little bit, because, as nice as it may be telling the user that they have written 182

characters and that they've gone over by 42 characters, it would be a lot nicer if we simply enforced

this rule by removing the extra characters.

So, for example, if I head over here and I paste in a huge paragraph, then you can see that it gets cut

off at 280 characters, and all the rest is deleted.

So how can we implement this using Javascript?

Well, first we have to learn about a function called slice. And just as its name suggests, it basically

allows you to slice and dice your strings to separate them into individual characters.

Now let me show you how slice works.

So I'm going to go ahead and select these two lines, and I'm going to comment out all of them by holding

down the command key and hitting forward slash.

Now on Windows it's holding down control and hitting the forward slash,

but it does exactly the same thing.

It takes our code and turns it into a comment.

So let's say that I have a variable that's called name and it contains the string

‘Angela’. If I take the name variable and I slice it by writing .slice, then I can specify which slice

I would like out of this string.

So say if I only want the first character in the string then I can simply write 0,

1, and this means that I'm trying to take the slice out of this string called name from position 0

all the way to, but not including, position 1.

So that is equal to simply the first character.

And now if I hit run you can see that what we get is the capital letter A, which is the first letter

in this string.

So a really important thing to remember is that programmers always count from zero.

So the capital A is at position zero and not at position 1.

So that means that the last letter or the sixth letter is actually at position 5 because we go 0 1 2

3 4 5.

So in order to get the last letter of this variable then I would have to say give me the character at

position 5 and continue until but not including position 6.

And of course there is no character at position 6.

But by saying 5, 6, we’re only grabbing the last character at position 5, which is of course

the lower case letter a.

Now I can also grab a bigger slice by having a larger range inside here.

So, for example, if I wrote name.slice(0,3),

can you predict what the output will be based on this code?

So the slice that starts off with the first character or the character position 0 and then ends before

the character position 3,

so remember 0 1 2 3,

that means that our output should be a n g.

And that's exactly what we get.

So a quick shortcut to know how many characters you're actually slicing is to simply take the upper

bound and minus the lower bound.

So say 3 - 0 is 3,

so that means you get three characters out.

If I wrote instead 1, 5, 5 - 1 is 4,

so I should be getting four characters out, and indeed that's what happens.

So let's say that we have a string abc, and we use the slice function on it. Then it allows us to separate

the string into separate characters.

But more importantly we can pick and choose which slices we would like out of this original string.

So for example if you write 0, 1, then you end up slicing at position 0 and then slicing at position

1.

So you end up with the first character of the string which in this case is a.

Now it's really important to remember that programmers always count from 0.

So the first character is always at position 0.

And that means that the third character, rather unintuitively, is actually at position 2.

Now what about this case?

What if we try to slice 1, 3?

What is the outcome?

Well, we start off at position 1, and we take the entire slice between position 1 and up to, but not including,

position 3, because you can see here we only have three items, one at 0, one at position 1, and the

last one at position 2.

So by slicing from 1 to 3, then we end up with the characters

b c.

So this is what the syntax looks like.

The function is called slice and you give it two numbers, the starting position and the ending position.

And you can't just write slice.

You also have to specify what you want to slice, so bread.slice, or, in our case, the name of a variable

.slice. And it's really important that you keep the syntax for your code to work.

Now, once you're comfortable with the slice function, I want you to implement this Twitter character counter

yourself by using what we learned about Javascript.

So you should be able to write some code that creates a prompt, and when you paste in a large paragraph of

text, then it should give you an alert that cuts your tweet down to only 140 characters.

So this will require what you've learned in this lesson about slice, as well as some of the knowledge from

previous lessons.

So pause the video now and see if you can complete this challenge.

All right. So let's delete these few lines of code, and let's uncomment our code here, which is exactly

the same as commenting, so command or control plus forward slash.

And this now becomes highlighted as code and treated as code.

So we've got a variable that's called tweet that gets bound to whatever the user enters in the prompt.

And then we want to write an alert that cuts down the tweet to 140 characters. So we can create a variable

called tweetUnder140.

And remember, we can't create variables with names that begin with numbers, but it can contain numbers

so tweetUnder140 is going to equal to tweet,

so that’s whatever the user put into the prompt, .slice, and then the all important numbers.

So, in order to get the first 140 characters we have to write 0, 140.

And, if we use that trick that we did before, which is where we try to calculate the range, then if we

take 140 - 0, that's 140 characters, starting from the first character.

So now let's put a semi-colon.

And in the alert we'll simply alert the tweetUnder140

back to the user.

So I'm going to go ahead and copy this long paragraph first and then I'm going to hit enter and run

our code, then I'm going to paste in that long paragraph, hit OK, and I get back 140 characters,

cutting it off at the 140th character.

And, if you want, you can go ahead and count this, or use the .length to get the computer to check it

for you.

Now, there might be a few variations on this solution, and that's totally fine. As long as it does exactly

the same thing,

then I'm happy that you've completed the challenge.

Now there's one way of dramatically cutting down these three lines of code into one, which some of you

guys might have done, and that is removing the need for these variables. So we can, for example, take the

value of this variable, tweetUnder140, and replace it in here, in the alert, and that allows us to delete

this line.

And instead of having a variable called tweet, we can also simply take the value of that variable and replace

it in the code here, and that allows us to get rid of this first line.

And this will work exactly the same as before.

Now in the next lesson the final thing that we're going to explore with strings is how you can change

the case of your string.

So for all of that and more, I’ll see you on the next lesson.