JavaScript for Beginners #9 - String Methods and Manipulation

Key Takeaways

hello everybody and welcome back so in this video we are we talking about string methods and concatenation of strings now we've dealt with strings a little bit before I've showed you as a few things we can do with them but I just want to show you a few other properties of strings because there is actually a lot and there's a lot of things that you kind of need to learn to deal with them properly and that's also something you're gonna be doing a lot in JavaScript is manipulating strings and user input and all of that so what I want to do is kind of have an example here where we're gonna get the user to type something and we're gonna modify the string they type in and just print it and show you what it looks like so to do this we're gonna say you know I probably should have kept this from the last time var text equals in this case I guess we'll say document dot get element by ID don't what was it valium I think it was value okay let's change this now to be a mp4 input and what I'm gonna do is simply just console dot log or actually we'll put that value in this output tag so what we'll say is output dot inner HTML equals and in this case text now let's just look at this example quickly to see how this works I'm also going to talk about this page in a second so let's refresh this let's type hello and then we can see obviously it shows up down below now this is where I'm grabbing some of these string methods from this just has a nice list of them I'll try to leave a link to it but remind me if I forget which is likely so those methods like starts with substring substring to local lowercase to string to lowercase to uppercase trim I'm not going to go through all of them but I'll show you what some of them do and why we might even actually want to use them so the easiest one to illustrate is to uppercase now you guys can probably guess what this is gonna do but essentially whenever you have a string object which in this case text is because this right here is gonna be storing some string value right this is going to be equal to a string so text now is storing some string which means that I can actually manipulate the variable text by calling you know some string methods on it so let's do this and let's refresh so when I do that and I type let's say hello we can see we get hello now in all upper cases so what to uppercase does is essentially take this string and create a new string is completely uppercase letters with whatever this string was now if I decide to add you know an uppercase o at the end we still are gonna get this because everything just goes uppercase now the same works for two lowercase like that so let's look at this so I go to lowercase and I type low then we're gonna get lowercase hello so this is often useful especially when you're asking maybe a question or something that could be right or wrong because you don't know if someone's gonna type in the answer with upper cases or with lower cases or maybe you know say they're gonna type in the answer to a question like maybe the answer is blue and they type blue with a capital B well is that wrong if B your answer that you had was blue with a lowercase B no the answer is still correct but if you're comparing you know blue like this with let's say something like blue obviously you know these two are not the same so what you would do is take that users input make it all lowercase so then that way you can compare if the value of your two strings are actually the same so that's where we use to lower case and dot uppercase now what we can actually do is starts with and ends with as well and this is gonna give us a boolean so starts with is gonna tell us if the string starts with a certain character so what we need to do is inside of here put the character we want to see if it starts with now maybe we want our string to start with a number sign or maybe we wanted to start with an @ sign like if we're doing a mention of someone on social media or something so what I can do is refresh this and now if I type say hello we're gonna get the value false but if I type at hello like this we get the value true because our string started with this character now same goes with ends with we have ends with we can use that same character again so in this case we'll do hello false hello with one of those at the end and what do we why are we not getting correct here let's see if this works hello hmm interesting why we keep getting false let me look at this okay so we got true there I think I actually had a space afterwards and that's why I wasn't working and that's actually the next one I'm going to talk about so notice here we're getting true but if I had a space then we get false so I think that's what was happening was essentially this string has a space at the end so that's why that was working so actually what I want to show you now is how can we get rid of that space so in that last instance right our string actually did end with this add sign but since we had a space at the end it wasn't counting because it was gonna look like something like I think we had like hell at like that so this was our string so obviously we see it ends with this but there is a space so how can we get rid of any of those spaces at the end or at the beginning of that string that we don't want well this is where we can actually use a method called trim now what trim is gonna do is simply remove any leading or trailing white spaces from our string so this is really useful because sometimes maybe someone's typing in their name or something and they type in like space hello well you don't want to store space hello you just want to store hello so in this case actually let's refresh this and if I do hello and like a bunch of spaces we're good okay so we're obviously gonna get false because there's a bunch of spaces but let's do this same example zoom hello at and then a bunch of spaces and click well our answer is true because we actually removed all these spaces when we did this trim here so that's what that does it actually removes any spaces I think a better example might be if we just actually print out text trim and I'll do some leading spaces so if I go like hello and just do a bunch of spaces here then technically when we printed this it should be expand we run this we just oh well I got to refresh this let's go hello do this we just get hello there's no spaces before that because we trimmed off all of those spaces so that's what those methods do now notice that I used two of those in combination with each other right so I had dot trim which returns to me a new string so that's gonna give me that hello without all those spaces there so it removes all those and then what I did was dot ends with like that right so what these methods do is they don't modify the original string they actually create a new one that can be used in whatever context you want right so if I have this you know let's do this trim what I'll do next is all this console dot log the actual value of text and show you guys the text isn't changing when we do this dot trim this just creates a new string they get stored in our inner dot HTML output it doesn't actually modify text so to illustrate that let's refresh this to do a bunch of spaces for hello click we can see that change but now if I go to inspect and we look at the console here which I think is right here we can see that we get hello and we actually have a bunch of spaces before that now I realize that sometimes it's hard to see the actual spaces so I'm gonna show you another property we have strings called lengths now what this does is it's different than a method which are what these are that we've been calling with these dot and then these brackets it actually tells you how long the string is which is kind of useful so in this case let's refresh this let's go a bunch of spaces hello click and in this case obviously we know that the string is only of length I believe 6 but here we're getting length 23 and that's because we've added a bunch of the spaces beforehand so it's printing out that length to us now this length property is really useful because sometimes like say you have a password you want to check well that password has to be of length at least 250 or something like that right or you know 250 25 10 whatever you want it to be like you need to have it of some certain length so what you do is you could check the length of whatever that user typed in say okay is it greater than H is it greater than 9 does it contain an add sign does it start with a capital whatever any of those you can check all that and if that's true you could say okay this is a valid password you can say okay no that's not a valid password so as that is a little bit about strings I mean I think I've showed you guys concatenation before where essentially we've had something like you know hello plus and then maybe in this case if we do text actually let's do this what I'm gonna do is simply say ask the user to type in their name now so we'll say to actually type something sure and we'll say you typed like that and then space now I think I showed you guys how this worked but essentially concatenation with strings is just adding them together so what we're gonna do here is that you typed and then just add this text trimmed value after so in this case if i refresh this we can close this console window actually let's get out of that and I type hello it'll say you typed hello right and that'll just print that out and show that to me now let's say I wanted to actually you know maybe print some numbers I want to print some other things well what I can do is I don't need to put them in strings I can say like plus five if I wanted to and I think I showed you guys how this works will essentially in now if I type hello it's just gonna add five to the end so just mush that together alright so I think that's all four strings for right now there is a lot more to talk about with strings again try to remind me to link this website that has a bunch of different methods that you can use for Strings I haven't shown all of them or even like most of them to be honest like there's a replace method which will replace a certain item in the string with another item we have split which will split this string we'll talk about that one later just lots of stuff you can do here I just want to give you as an introduction and illustrate kind of how these work and how you can use the methods and you know how I did something like text trim even though text isn't actually string but it's storing the string value stuff like that so anyways if you guys enjoy it as always leave a like subscribe to the channel down below and I'll see you guys another JavaScript tutorial