Lesson 14
String Slicing in JavaScript
Summary
# JavaScript String Slicing Lesson
Welcome to NVK Tech World! In this lesson, we will learn about string slicing in JavaScript using the `slice` method.
## Introduction to String Slicing
- We start with a basic string, for example, "hello world".
- The goal is to manipulate the string by removing certain characters.
## Using the `slice` Method
1. **Basic Slicing**:
- To remove the first character (H), call the method with the argument `1`:
```javascript
let str = "hello world";
let slicedStr = str.slice(1); // Result: "ello world"
```
2. **Removing Multiple Characters**:
- If you want to remove the first two characters (H and E), call the method with the argument `2`:
```javascript
let slicedStr = str.slice(2); // Result: "llo world"
```
3. **Slicing with Start and End**:
- To extract only "hello", specify a start and an end index. Remember that indices start from 0:
```javascript
let slicedStr = str.slice(0, 5); // Result: "hello"
```
- The end index is exclusive, so for "hello", use `slice(0, 5)`.
4. **Extracting Other Parts of the String**:
- To extract "world":
```javascript
let slicedStr = str.slice(6, 11); // Result: "world"
```
- Alternatively, you can use:
```javascript
let slicedStr = str.slice(6); // Result: "world"
```
## Accessing Documentation
- Familiarize yourself with the official documentation to understand how to use the `slice` method effectively.
- A reliable source is the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice).
### Key Points in Documentation:
- Syntax of `slice`: `string.slice(beginIndex, endIndex)`
- The second argument (`endIndex`) is optional and exclusive.
- The `slice` method does not modify the original string, it returns a new string.
- Compatible with all modern browsers.
## Conclusion
Thank you for watching this lesson! Keep practicing string slicing and refer to the documentation as needed. Until next time, goodbye!
Video Transcript
Welcome to NVK Tech World. In this lesson we're going to learn how to do some string
slicing in JavaScript. So let's say we have a string like we did before, right? Some basic
sentence could be whatever you want. I'm just going to say hello world again. Now suppose
I have the string and I want to get rid of certain characters. For example, if I want
to get rid of this age, I just want to show everything after the first character in the
string. How can I achieve that? How can I slice some parts of this string? So we're
going to use this function. It's method called slice. Okay. So with slice, we're going to be
able to just get parts of the string instead of the whole thing. So we can get this part,
we can get this part, can get this part, and so on. Okay. So we have a string. And then we're
calling a function. This is also called a method, by the way. If you hurry the word method, a method
is actually a function. So they might be used interchangeably. But there's a slight difference
between them in terms of the context of where they appear. So in this case, you can also call this
function a method. So this guy, you can think of it as a method that operates on this string type.
Okay. So slice. And then I need some arguments, because it needs to know, okay, you let me know
how much you want to slice the string. So what parts of this string do you want? Do you want this
highlighted part? Do you want this? You have to tell it. Otherwise, it doesn't know. Okay. So let's
say we want just to get rid of the H here, but we want everything else in this string. So if you
just want to get rid of the first character in the string, you can just give an argument one. And
let's try it out. So as you can see, the first letter of the string is gone. The first character, H,
is gone. And that's the most basic use of the slice in this case with one argument. Okay. So if you
try to, what do you think is going to happen? That's right, the first two characters of the string
will be wiped out. Now there's no H, there's no E. It's just the remaining low world. Okay. And so on,
you can keep trying until you reach nothing else to chop, right? So that's the most basic.
Uses all the slice method. Now let's try something else. Let's say we have Hello World. And then we
just want to get rid of the first character. And actually, let's say we just want to take the world
Hello. And everything else wanted to be wiped out. So to do that, we're going to do like so. So we
have to tell slice where to start and where to end. So where do we start? We're going to start at the
first character here. Okay, now the first character when you're dealing with strings, you have to,
there's a location index for each character. Now this location index, it's counted one by one,
except it starts not from one, but from zero. So it's offset. So the first character is actually a
position zero. The second character is a position one, third character position two, and so on. So
we're going to tell slice to start at the first character, that's position, that's index zero. Okay,
keep that in mind, all starts counting the index from zero. Now you want to be able to go all the
way up to the old character. Okay, that's where let's count zero, one, oops, one, two, three, four. Now
the old character is that position index four. So you would think that slice, if you give four,
it will, okay, let's get from zero to four. But that's not how slice works. Actually slice would
take the second argument as the position that you want to chop, but one plus. So we will not
include this guy at position four in the slicing. So actually, you're going to get just the hell
word, okay. So the O is going to be gone, because slice always assumes that the second parameter,
it's not going to be inclusive. So you always have to add one to whatever position index for
the last character is. So this case is going to be four plus one, which is five. So
you're going to go from zero all the way to five minus one, because the five is not inclusive,
the five is the white space. So you cannot include that because slice always assumes the second
argument is not inclusive. So you're going to get the word hello. So let's write out.
There you go. You see there's no O missing, and there's no space. It's just hello
from position zero in the string to position four. Remember, the five is the actual,
actually the white space. Okay, so you give it a starting index and index, which is not inclusive,
not inclusive. And you got the word hello. Now I want you to try it out. I want you to
to get the word world by itself using slice. Now remember, you have to first count where you're
going to start. So you're not going to start from zero because zero is where the H is. First,
you got to figure out what's the position index of the W is. And then in this case, where does it end?
Okay. What's the position index of the last character plus one for the slice? Okay.
So I'll give you some time. And then we'll go on. So how did it go? So let's try to capture the world,
the world, the world world, right? So we're going to do a slice.
Now we're going to count here, what's the position of the W? We always count from zero. So starting
with the first character zero, one, two, three, four, five, and then six, right? So that's going to be
two. This is going to be six. Now what's the last character? Well, we were started at six. Now seven,
eight, nine, 10 is the last character, but slice always assumes you have to say the last character
plus one, which is going to be 11 because the 11 is going to be is not going to be included
in the slicing. So what we get? World. Okay. So that's it. We're going to get the world world
starting position index six ending at position 10, which is always the last this guy, guy minus one.
Notice that this case is actually you didn't need to have the second argument.
You could have done just six because as we saw before, you can just give slice
six, just one argument. And then it's going to assume that, okay, so you want me to just get
rid of the first six characters. And then it's going to end at the end of the string. So you
can think of this way too, like we did before. Okay, please start at six, but go all the way to
the end of the string. That's one way you can think about this. So that works too. Same thing.
Okay. So that's the slice method. Now what I want to teach you is how to reference all these methods
because you got to get used to accessing the documentation for all these things we do.
Now, let me minimize the window here. And I'm just going to do a search on JavaScript string,
slice. Now I want you to go to, I think one good documentation is on the MDN web docs. In this
case is this guy here from developer dot Mozilla dot org. And you can see this is a slice method.
Make sure you're dealing with the right type. This case, we're doing strings, right? So make
sure you read string here and not something else. So string prototype slice, that's the method,
okay, the slice method. So it gives a brief explanation of the method here, some good examples.
And then you can see down here, the syntax, you can see big in index and index,
those are the arguments, these brackets square brackets means the argument is optional.
As we saw before, you don't have to have the second argument. So therefore, it is optional.
And you can read about the parameters here of the method, beginning and end, you can see the
end index is optional. And so on, blah, blah, blah, and return value a new string. Look at this
string. It's this word is very important to know that it does not modify the original, okay, new string.
And the description more description, more examples. And very important section two, the
specification and the support compatibility of the browser seems like this method is
supporting and pretty much all modern browsers. So you'll be very much safe to always use this
method in your code. So there's no problem there. Okay. So that's it. I just want you to get familiar
with the documentation. So you can always reference it to a search and see what the arguments what the
function does, the method, what's the our parameters, what each parameter does, what more
description examples, specifications and the compatibility to see if you have basics afford
among all major browsers. Okay. So thank you so much for watching. And until the next time, bye.
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: