1 00:00:00,470 --> 00:00:05,560 Art guys in this video we're going to talk about strings and concatenation and some of the properties 2 00:00:05,560 --> 00:00:07,930 and methods that are available with strings. 3 00:00:07,960 --> 00:00:15,520 So let's go ahead and create a couple of strings here so we'll say first name equals kohm William and 4 00:00:15,520 --> 00:00:21,350 let's create a last name and I'll say Johnson. 5 00:00:21,850 --> 00:00:24,790 OK so we have these first name last name. 6 00:00:24,790 --> 00:00:30,700 Now what I'm going to do is I'm going to initialize a variable called Val that we can work with just 7 00:00:30,700 --> 00:00:39,850 so we don't have to do a million different console logs and we'll just overwrite this value as we move 8 00:00:39,850 --> 00:00:40,210 along. 9 00:00:40,210 --> 00:00:48,190 So first thing let's go ahead and set this to first name plus last name and I know a lot of you know 10 00:00:48,190 --> 00:00:49,410 what this is going to do. 11 00:00:49,570 --> 00:00:53,680 And even if you don't you can probably guess if we go ahead and run this it's just going to take the 12 00:00:53,680 --> 00:00:56,700 first name and last name and squish them together. 13 00:00:56,710 --> 00:01:03,070 Now this is if you wanted to output this name you'd probably want a space in between. 14 00:01:03,070 --> 00:01:05,410 So this is where you'd use concatenation 15 00:01:08,690 --> 00:01:13,930 and that might spell some comments wrong guys because it's not really important you know it's not going 16 00:01:13,930 --> 00:01:19,110 to throw an error so I might not realize it and I'm not the best speller so just be aware of that. 17 00:01:19,120 --> 00:01:21,040 So let's say we wanted the space in between. 18 00:01:21,040 --> 00:01:30,160 So we'll take this vowel and we'll set that to first name and then we want to concatenate a string. 19 00:01:30,160 --> 00:01:35,650 So we'll just use a plus sign to concatenate it and we'll just put a space in there and then we're going 20 00:01:35,650 --> 00:01:41,810 to concatenate back to a variable and we want to put in the last name. 21 00:01:41,890 --> 00:01:48,130 So now we save that we get William space JOHNSON OK and we can put whatever we want in here as a string 22 00:01:48,370 --> 00:01:50,400 and it'll show up. 23 00:01:50,410 --> 00:01:56,590 So let's let's go from concatenation to appending. 24 00:01:56,700 --> 00:02:03,400 OK so if we want to append something meaning we want to add onto a variable not replace it but add onto 25 00:02:03,490 --> 00:02:04,000 it. 26 00:02:04,030 --> 00:02:09,360 So let's say we have vowel equals and I'm going to set this set it to my name. 27 00:02:09,360 --> 00:02:17,130 So Brad and I'm going to put a space here and then if I say vowel equals and then my last name travesty 28 00:02:17,260 --> 00:02:22,780 obviously that's going to overwrite travesties overwriting brab but if I want to append it I can do 29 00:02:22,870 --> 00:02:29,260 just two plus equals here and save and I can see we get Bradd space travelers see that space is coming 30 00:02:29,260 --> 00:02:30,560 from here. 31 00:02:30,610 --> 00:02:30,890 All right. 32 00:02:30,890 --> 00:02:35,160 So remember this is to append now. 33 00:02:35,630 --> 00:02:40,410 Let's go ahead and create a sentence here with some variables in it. 34 00:02:40,420 --> 00:02:49,630 So I will say Hello my name is and then I'm just going to concatenate first name and then we'll go back 35 00:02:49,630 --> 00:02:57,160 to a string and we'll say and I am and I'm just going to put another variable up here called Age and 36 00:02:57,160 --> 00:03:04,300 we'll set it to 36 and we'll say I am and then we'll concatenate page and we'll save that we get. 37 00:03:04,300 --> 00:03:07,960 Hello my name is William and I am 36. 38 00:03:07,960 --> 00:03:13,840 OK so this is how concatenation works now with E-6 or iest 2015. 39 00:03:13,840 --> 00:03:20,560 They introduced template literals also called template strings which makes this much easier especially 40 00:03:20,560 --> 00:03:25,360 when you're dealing with each team out when you're generating aged him Elen javascript. 41 00:03:25,360 --> 00:03:30,040 It makes it much easier to have a string and include variables and we're going to do that in the next 42 00:03:30,040 --> 00:03:30,720 video. 43 00:03:30,880 --> 00:03:33,970 But you still need to know how to do it this way. 44 00:03:34,540 --> 00:03:34,840 All right. 45 00:03:34,840 --> 00:03:47,910 So let's talk about scaping So let's say we have a sentence here and we want to say that's awesome. 46 00:03:47,920 --> 00:03:52,680 I can't wait like that and you can see that there's already something messed up here. 47 00:03:52,810 --> 00:03:54,330 Even the editor knows it. 48 00:03:54,400 --> 00:03:59,410 Basically what's happening is restarting a string with a single quote and then we have this this quote 49 00:03:59,410 --> 00:04:05,130 here which we just want to use in the sentence but it's looking at it as the end of the string. 50 00:04:05,370 --> 00:04:10,480 Ok so one solution would be to use double quotes like this. 51 00:04:10,720 --> 00:04:14,590 OK if I save that that will work it prints out. 52 00:04:14,590 --> 00:04:19,280 And by the way if I try to print that out it's just going to give us an error unexpected identifier. 53 00:04:19,330 --> 00:04:24,570 But another way you can do it if you don't want to use double quotes is you can escape with a backslash. 54 00:04:24,680 --> 00:04:29,340 OK so this quote right before it will put a backslash for both of these. 55 00:04:29,470 --> 00:04:35,890 And if we save that that works because what this backslash does is it escapes this code making it just 56 00:04:35,890 --> 00:04:37,380 a regular character. 57 00:04:37,540 --> 00:04:41,770 It basically takes its power way of ending a string. 58 00:04:41,920 --> 00:04:46,410 Ok so that that's escaping now. 59 00:04:46,420 --> 00:04:51,610 Next thing I want to look at is some of the properties and methods that are available with strings so 60 00:04:51,610 --> 00:04:52,690 what say length. 61 00:04:52,690 --> 00:04:58,350 So we'll set Val equal to first name dot length. 62 00:04:58,390 --> 00:05:03,650 Now since this is a proc and not a method we don't need parentheses. 63 00:05:03,650 --> 00:05:07,550 Parentheses are for methods which are basically just functions. 64 00:05:07,670 --> 00:05:10,150 So let's go ahead and try that and we get 7. 65 00:05:10,250 --> 00:05:13,750 OK so it just counts the number of characters in the string. 66 00:05:13,760 --> 00:05:15,440 Very easy. 67 00:05:15,440 --> 00:05:24,710 So let's also look at a let's look at a method called concat which works similar to how what we did 68 00:05:24,710 --> 00:05:26,870 here but by using a method. 69 00:05:26,870 --> 00:05:35,960 So if we say Val equals and let's take first name and say concat we're saying we want to concatenate 70 00:05:35,960 --> 00:05:37,220 something onto it. 71 00:05:37,400 --> 00:05:43,610 Let's concatenate a space and then we can put a second parameter in here put a comma and then let's 72 00:05:43,610 --> 00:05:45,620 put last name. 73 00:05:45,630 --> 00:05:53,840 So now if I save that we get William Johnson the same result as this except we're using the concat method. 74 00:05:53,960 --> 00:05:54,550 All right. 75 00:05:54,680 --> 00:06:05,330 Another method we have is to uppercase in two lowercase so we can change case pretty easily will we'll 76 00:06:05,330 --> 00:06:15,500 say Val equals first name dots to uppercase and save and you can see if we get William in all uppercase 77 00:06:15,890 --> 00:06:23,210 and at the same time of course we can do to lower case and save and we get William lowercase. 78 00:06:23,810 --> 00:06:24,140 OK. 79 00:06:24,140 --> 00:06:27,950 Now you can also treat strings like read only arrays. 80 00:06:27,950 --> 00:06:33,980 Now this isn't very this isn't very useful but I just want to mention it because you can do it. 81 00:06:33,980 --> 00:06:37,300 So let's say we want to get a certain character of the string. 82 00:06:37,400 --> 00:06:43,370 We could say for instance first name and just like an array we could use brackets and then we haven't 83 00:06:43,370 --> 00:06:45,280 gone over arrays yet but we will. 84 00:06:45,440 --> 00:06:49,050 And let's say zero and save and we get w. 85 00:06:49,070 --> 00:06:56,930 So what this is doing is is taking the zero index of this value and arrays start with zero so to strings 86 00:06:56,930 --> 00:06:59,420 so 0 1 2 and so on. 87 00:06:59,630 --> 00:07:05,030 If we were to do two then it's going to give us L which is the two index. 88 00:07:05,710 --> 00:07:14,170 All right if we want to find the index of a value or a character we can use the index of method. 89 00:07:14,450 --> 00:07:23,600 So let's say Val equals and we'll say first name dot index of. 90 00:07:25,070 --> 00:07:30,700 And let's say we want the index of to see what that gives us. 91 00:07:30,870 --> 00:07:32,210 That was wrong. 92 00:07:32,300 --> 00:07:36,640 We would actually want to look for a certain character so let's do two. 93 00:07:36,670 --> 00:07:42,920 Al there's actually a method that does what I what I just did and I'll show you that in a second but 94 00:07:42,920 --> 00:07:44,790 if I save that it gives us two. 95 00:07:44,930 --> 00:07:45,250 OK. 96 00:07:45,260 --> 00:07:50,210 What it does is it starts here and it looks for the first it finds and gives us the index which in this 97 00:07:50,210 --> 00:07:53,080 case 0 1 2. 98 00:07:53,090 --> 00:07:58,130 Now if we want to go from the other way then we can use the last index of. 99 00:07:58,130 --> 00:08:03,220 So let's say last capital high index of. 100 00:08:03,260 --> 00:08:07,990 Now we get three which is the second Al because it's coming from this way. 101 00:08:08,760 --> 00:08:09,120 All right. 102 00:08:09,120 --> 00:08:14,280 Now the kind of opposite of index would be char at. 103 00:08:14,290 --> 00:08:26,530 So char at we can do a first name die char at this time we can put in a number or let's say two. 104 00:08:26,580 --> 00:08:29,650 This is where I try to do with index of and it didn't work. 105 00:08:29,670 --> 00:08:32,420 And by the way you saw that it gave us negative 1. 106 00:08:32,430 --> 00:08:38,070 That's because if you use index of the character you're searching for is not there then it's equal to 107 00:08:38,070 --> 00:08:39,280 negative 1. 108 00:08:39,300 --> 00:08:40,770 That's the default. 109 00:08:40,770 --> 00:08:51,010 Now if I do this chart two and save we get L because that's the 2 place or 0 1 2 is El all right now 110 00:08:51,010 --> 00:08:57,550 let's say you wanted to get the last character of a string and a string could change so you need some 111 00:08:57,550 --> 00:09:00,340 kind of formula so to do that. 112 00:09:00,550 --> 00:09:06,920 It's very easy and we just put a comment in here we'll say get a last character. 113 00:09:07,930 --> 00:09:15,970 So we'll set Val equal to greeting Daut char at an inn here instead of putting just a number we want 114 00:09:15,970 --> 00:09:25,150 to put the nuck reading first name so first named char out and then we just want to put in here first 115 00:09:25,150 --> 00:09:31,320 name dot length which gives us the entire length and the last character there would be minus one. 116 00:09:31,360 --> 00:09:33,960 So we'll save that and you can see we get em. 117 00:09:34,210 --> 00:09:37,580 If I were to add an s on to this in say will get. 118 00:09:37,610 --> 00:09:43,690 So that will always give us the last character and that's a common formula you'll see in javascript 119 00:09:44,200 --> 00:09:46,360 when dealing with strings. 120 00:09:46,360 --> 00:09:49,890 Another thing we could do is get substrings. 121 00:09:49,990 --> 00:09:55,110 So basically pull up a substring out of a string. 122 00:09:56,350 --> 00:10:07,920 So we'll do Val equals first name dot substring and let's say we want zero to four and save and we get 123 00:10:07,920 --> 00:10:08,670 we'll. 124 00:10:08,980 --> 00:10:11,040 OK so we're plucking out a string. 125 00:10:11,050 --> 00:10:15,060 Substring of well from the first name string of William. 126 00:10:15,370 --> 00:10:16,360 So that substring. 127 00:10:16,360 --> 00:10:17,860 We also have slice 128 00:10:22,440 --> 00:10:28,560 so we can say vowel and slices mostly used with a raise to pull things out of arrays. 129 00:10:28,680 --> 00:10:38,390 But you can also use it with strings so I'd say slice and let's do 0 4 and it gives us the same thing 130 00:10:38,400 --> 00:10:41,830 slice is very similar to substring. 131 00:10:42,630 --> 00:10:44,990 But one thing we can do is slice. 132 00:10:45,110 --> 00:10:51,960 If I go ahead and just coffee that we can put a negative number in here I would say negative 3 and it'll 133 00:10:51,960 --> 00:10:55,030 start from the back and it'll take the last three. 134 00:10:55,130 --> 00:10:55,680 OK. 135 00:10:55,770 --> 00:10:58,770 Which can be helpful in some situations. 136 00:10:58,770 --> 00:10:59,640 So that slice. 137 00:10:59,640 --> 00:11:04,700 Now the next one I want to show you is split and this can be really handy. 138 00:11:04,710 --> 00:11:10,050 What this does is it can split a string into an array based on a separator. 139 00:11:10,050 --> 00:11:16,610 So for instance if we were to probably have to you know have to add a new variable here let's just say 140 00:11:16,900 --> 00:11:20,530 as TR and we'll set it to. 141 00:11:20,820 --> 00:11:22,790 Hello there. 142 00:11:23,040 --> 00:11:27,330 My name is Brad and excellence. 143 00:11:27,330 --> 00:11:33,750 Get rid of the comma because what I want to do is I want to turn this into an array based on spaces. 144 00:11:33,900 --> 00:11:42,240 OK so what I can do is set as he arches that variable and we can say splits and we can split at the 145 00:11:42,240 --> 00:11:46,870 space case we want to put a space in here and we'll save that. 146 00:11:46,870 --> 00:11:53,410 Now you can see we have as 6 value array and we have each word in each index here. 147 00:11:53,460 --> 00:11:55,950 So 0 through 5. 148 00:11:55,980 --> 00:12:01,920 Now where this can come in handy is if let's say you had a full form on your website and you had maybe 149 00:12:01,920 --> 00:12:08,770 it was to create a blog post and you had them enter comma separated tags for their post. 150 00:12:08,820 --> 00:12:17,940 So let's say it's a post on web development so you could say like web design web development programming 151 00:12:17,940 --> 00:12:18,880 and so on. 152 00:12:19,050 --> 00:12:25,110 And then when they submit the form you can turn that into an array and then do what you want with it. 153 00:12:25,110 --> 00:12:34,410 So we could save thou equals tags dots split and we'll split it by the comma and then save and you can 154 00:12:34,410 --> 00:12:36,820 see we have an array with each tag. 155 00:12:36,880 --> 00:12:43,480 All right even if the word has spaces in it we're just we're splitting it by the comma all right and 156 00:12:43,480 --> 00:12:45,130 then see another one. 157 00:12:45,220 --> 00:12:50,200 I want to look at this place and this is very simple it does just that. 158 00:12:50,200 --> 00:13:00,560 So let's say take that string that we have which is Hello there my name is Brad So what we'll do is 159 00:13:00,560 --> 00:13:10,070 we'll say replace and we want to search for Brad and we'll replace it with let's say Jack and save. 160 00:13:10,070 --> 00:13:12,010 And we get Hello there my name is Jack. 161 00:13:12,010 --> 00:13:17,690 So you can replace something inside the string and then another one we have the last one I'm going to 162 00:13:17,690 --> 00:13:26,390 show you is includes which gives you a true or false value based on if something is in the string. 163 00:13:26,390 --> 00:13:33,530 So let's say Vau equals as TR Got includes. 164 00:13:34,280 --> 00:13:40,980 And we'll say the string hello and say when we get true k because that is included. 165 00:13:41,030 --> 00:13:47,450 If I were to put a let's say I don't know foo and save will get false. 166 00:13:47,450 --> 00:13:51,940 OK so that's a way that you can test to see if something is inside of a string. 167 00:13:52,010 --> 00:13:58,070 So I know this isn't the most exciting stuff right here but this is the basics and you need to know 168 00:13:58,070 --> 00:14:00,590 it and you will run into some of this stuff. 169 00:14:00,590 --> 00:14:03,110 So like I said it's not exciting. 170 00:14:03,140 --> 00:14:07,790 We will get into more exciting stuff when we start building projects getting into the dorm. 171 00:14:07,910 --> 00:14:14,090 But this this entire section is really for beginners and getting Jaar just getting your feet wet and 172 00:14:14,120 --> 00:14:18,020 trying to understand the basic fundamentals of javascript. 173 00:14:18,020 --> 00:14:20,870 All right guys thanks for watching and I will see you in the next video.