WEBVTT 1 00:00:01.482 --> 00:00:03.608 Hey there, welcome back. 2 00:00:03.608 --> 00:00:07.796 There are big improvements on how we handle strings in ES6 3 00:00:07.796 --> 00:00:10.478 so let's now take a look at the major changes 4 00:00:10.478 --> 00:00:12.561 that happened in strings. 5 00:00:13.413 --> 00:00:16.257 So let's start by creating some data here 6 00:00:16.257 --> 00:00:18.091 that we can work with. 7 00:00:18.091 --> 00:00:20.008 So let's define a name, 8 00:00:25.842 --> 00:00:29.509 and we do so using the let definition, okay. 9 00:00:31.619 --> 00:00:36.183 So we're already using the new ES6 version here 10 00:00:36.183 --> 00:00:39.350 to declare our variables, Smith, okay. 11 00:00:41.315 --> 00:00:44.648 And then this one is gonna be a constant 12 00:00:45.734 --> 00:00:49.901 so the yearOfBirth is a constant because, as we saw before, 13 00:00:50.859 --> 00:00:54.276 it's something that really cannot change. 14 00:00:56.220 --> 00:00:59.470 And we also can create a function here, 15 00:01:01.238 --> 00:01:03.127 and you already know this one, 16 00:01:03.127 --> 00:01:06.791 it's the calculate age function, so calcAge, 17 00:01:06.791 --> 00:01:10.208 and it gets a year, and it simply returns 18 00:01:12.116 --> 00:01:15.114 the current year, let's say 2016 19 00:01:15.114 --> 00:01:18.781 minus the year that it receives on an input. 20 00:01:20.428 --> 00:01:23.867 All right, so the first thing that I want to talk about 21 00:01:23.867 --> 00:01:27.099 is template literals, and that's probably the coolest 22 00:01:27.099 --> 00:01:28.781 new thing about strings. 23 00:01:28.781 --> 00:01:32.108 And I really love this new feature because it really makes 24 00:01:32.108 --> 00:01:35.919 our life easier when working with strings. 25 00:01:35.919 --> 00:01:39.953 So imagine that in the ES5 we wanted to put 26 00:01:39.953 --> 00:01:44.130 all of these data together in a big string. 27 00:01:44.130 --> 00:01:46.213 So let's say console.log, 28 00:01:47.934 --> 00:01:50.017 so This is the firstName, 29 00:01:52.438 --> 00:01:55.897 then we have to use of these plus signs like this. 30 00:01:55.897 --> 00:02:00.064 And for me personally, I find this really annoying. 31 00:02:01.343 --> 00:02:04.260 So firstName and then the lastName, 32 00:02:06.800 --> 00:02:07.967 so John Smith. 33 00:02:10.566 --> 00:02:13.899 And it goes on and on so, He was born in 34 00:02:16.589 --> 00:02:20.006 now on this plus sign again, yearOfBirth, 35 00:02:23.923 --> 00:02:26.923 so Today, he is, and now we can also 36 00:02:28.700 --> 00:02:30.617 calculate the age here. 37 00:02:31.978 --> 00:02:36.145 So of course, we use calcAge and then his yearOfBirth, 38 00:02:41.523 --> 00:02:42.356 years old. 39 00:02:44.228 --> 00:02:47.957 So this was quite some work, right? 40 00:02:47.957 --> 00:02:51.040 So let's check it out in the console. 41 00:02:52.259 --> 00:02:54.295 So yeah, This is John Smith. 42 00:02:54.295 --> 00:02:55.384 He was born in 1990. 43 00:02:55.384 --> 00:02:57.799 Today, he is 26 years old. 44 00:02:57.799 --> 00:02:59.314 Let's just clear this here. 45 00:02:59.314 --> 00:03:01.481 This part was from before. 46 00:03:05.328 --> 00:03:08.560 So again, this our string now. 47 00:03:08.560 --> 00:03:11.477 So again, this is bit hard to write 48 00:03:12.947 --> 00:03:16.638 with all of these plus signs, and it gets really confusing. 49 00:03:16.638 --> 00:03:20.688 In ES6, we have a very cool new thing which is called 50 00:03:20.688 --> 00:03:24.614 template literals, and it works like this. 51 00:03:24.614 --> 00:03:27.482 In order to use them, we now use backticks 52 00:03:27.482 --> 00:03:30.881 instead of the quotation marks that we used before. 53 00:03:30.881 --> 00:03:33.703 So backticks are these symbols here. 54 00:03:33.703 --> 00:03:37.922 All right, so we use these one instead of the quotes 55 00:03:37.922 --> 00:03:41.852 that we used before or the single quotes, right, 56 00:03:41.852 --> 00:03:43.650 so we now use backticks. 57 00:03:43.650 --> 00:03:45.942 And this tells JavaScript that we want 58 00:03:45.942 --> 00:03:48.462 to use a template literal. 59 00:03:48.462 --> 00:03:51.756 Now we can write all of our text and put the variables 60 00:03:51.756 --> 00:03:54.541 right inside of the text, 61 00:03:54.541 --> 00:03:56.510 and this is how it works. 62 00:03:56.510 --> 00:03:59.091 Let's write the same sentence again. 63 00:03:59.091 --> 00:04:03.008 This is, and now we simply can do it like this. 64 00:04:04.095 --> 00:04:06.944 So there's let's say a dollar sign here 65 00:04:06.944 --> 00:04:09.974 and then the curly brackets. 66 00:04:09.974 --> 00:04:14.057 Now we just have to say firstName, and that's it. 67 00:04:16.822 --> 00:04:18.489 Now, lastName, okay. 68 00:04:22.550 --> 00:04:25.879 So let's check this before we continue, and alright, 69 00:04:25.879 --> 00:04:27.505 This is John Smith. 70 00:04:27.505 --> 00:04:29.953 So now we don't have to use all these annoying plus signs 71 00:04:29.953 --> 00:04:33.707 and starting and stopping the strings like we did here, 72 00:04:33.707 --> 00:04:37.821 so all we have to do now is one big string which starts 73 00:04:37.821 --> 00:04:40.488 and begins here with a backtick. 74 00:04:42.599 --> 00:04:46.347 So let's continue our sentence here. 75 00:04:46.347 --> 00:04:47.597 He was born in, 76 00:04:51.045 --> 00:04:53.962 and once again, we do it like this. 77 00:04:54.886 --> 00:04:57.553 In yearOfBirth, and today he is, 78 00:05:03.401 --> 00:05:06.190 and we can actually not just put variable names here 79 00:05:06.190 --> 00:05:07.863 but entire expressions. 80 00:05:07.863 --> 00:05:10.278 We can calculate this age right here inside 81 00:05:10.278 --> 00:05:12.400 of this template string. 82 00:05:12.400 --> 00:05:16.412 So once again we can use the calcAge function here 83 00:05:16.412 --> 00:05:19.829 and it's gonna work just fine, years old. 84 00:05:21.476 --> 00:05:25.643 So now we have the same sentence as before hopefully. 85 00:05:26.863 --> 00:05:30.048 And yeah, it's exactly the same. 86 00:05:30.048 --> 00:05:34.863 So this was much quicker, right, and much easier to write. 87 00:05:34.863 --> 00:05:37.971 This is probably one of the easiest and most straightforward 88 00:05:37.971 --> 00:05:42.174 things to implement right away when you start using ES6, 89 00:05:42.174 --> 00:05:46.547 and it's a huge advantage in fact over ES5. 90 00:05:46.547 --> 00:05:49.811 So this is template literals, but there's more. 91 00:05:49.811 --> 00:05:53.887 So in strings we also have now a couple of new methods. 92 00:05:53.887 --> 00:05:57.479 We talked about some string methods back in our budget 93 00:05:57.479 --> 00:06:01.720 project but now we have some more in a new string method, 94 00:06:01.720 --> 00:06:03.516 so let's take a look at them. 95 00:06:03.516 --> 00:06:07.342 Let's first start by creating a new string, 96 00:06:07.342 --> 00:06:10.892 and I'm just gonna call it name or n actually 97 00:06:10.892 --> 00:06:13.462 which is just gonna be John Smith. 98 00:06:13.462 --> 00:06:16.981 And now we already know how to do that, right? 99 00:06:16.981 --> 00:06:18.814 We just take firstName 100 00:06:21.998 --> 00:06:23.248 space lastName. 101 00:06:26.731 --> 00:06:28.541 All right, so that's how you use some 102 00:06:28.541 --> 00:06:31.374 of the new methods on this string. 103 00:06:32.498 --> 00:06:35.614 The first one that I want to show you is called startsWith. 104 00:06:35.614 --> 00:06:37.947 We can just say n.startsWith 105 00:06:42.467 --> 00:06:45.819 and then, for example, we can say J, 106 00:06:45.819 --> 00:06:47.873 and this is then gonna return if the string 107 00:06:47.873 --> 00:06:49.623 starts with J or not. 108 00:06:50.726 --> 00:06:54.893 And actually to see this we have to console.log this. 109 00:07:00.787 --> 00:07:04.964 So let's see, true, of course, because remember 110 00:07:04.964 --> 00:07:07.860 this one here is John Smith, and of course, 111 00:07:07.860 --> 00:07:09.443 it starts with a J. 112 00:07:10.317 --> 00:07:15.271 If we would put an n in here, it would actually be false, 113 00:07:15.271 --> 00:07:17.938 and also a small j is also false 114 00:07:19.514 --> 00:07:21.469 because it's not the same letter. 115 00:07:21.469 --> 00:07:25.070 I mean it's also a j, but it's not a capital J, 116 00:07:25.070 --> 00:07:29.560 so JavaScript identifies this as something else. 117 00:07:29.560 --> 00:07:32.065 Okay, and such as we have startsWith, 118 00:07:32.065 --> 00:07:34.067 we also have endsWith. 119 00:07:34.067 --> 00:07:38.321 So let's just duplicate this line with Command + D 120 00:07:38.321 --> 00:07:39.821 and then endsWith. 121 00:07:42.369 --> 00:07:46.378 So let's test if your string ends with th, 122 00:07:46.378 --> 00:07:48.829 and remember it's called John Smith, 123 00:07:48.829 --> 00:07:52.829 so we should get true, right, so it makes sense. 124 00:07:54.066 --> 00:07:58.066 If you once again say something else, let's say, 125 00:07:59.432 --> 00:08:03.929 something like this, then of course we have false. 126 00:08:03.929 --> 00:08:06.471 We can test if a string starts with something 127 00:08:06.471 --> 00:08:09.620 or if it ends with something. 128 00:08:09.620 --> 00:08:12.842 What about the middle of the string? 129 00:08:12.842 --> 00:08:15.009 For that we have includes. 130 00:08:16.681 --> 00:08:20.315 We can ask if the string includes something. 131 00:08:20.315 --> 00:08:24.482 Let's for example, ask if the string includes a space, 132 00:08:25.989 --> 00:08:28.691 and what do you think, of course it's true 133 00:08:28.691 --> 00:08:31.834 because remember, and we can check it out here, 134 00:08:31.834 --> 00:08:34.974 and right again, it's John Smith. 135 00:08:34.974 --> 00:08:38.425 Of course, there's an S in here. 136 00:08:38.425 --> 00:08:39.842 Or if we test oh, 137 00:08:41.487 --> 00:08:45.075 and see if there's an oh in this string, 138 00:08:45.075 --> 00:08:47.742 and yeah, we also get true here. 139 00:08:48.709 --> 00:08:51.075 These are three very useful methods 140 00:08:51.075 --> 00:08:54.306 that are now included in ES6. 141 00:08:54.306 --> 00:08:58.477 Okay, and just one more which the repeat method. 142 00:08:58.477 --> 00:09:02.033 Let me also console.log something here, 143 00:09:02.033 --> 00:09:03.650 and what I'm gonna do 144 00:09:03.650 --> 00:09:06.317 is simply say firstName.repeats. 145 00:09:10.185 --> 00:09:15.117 Then we can say how many times we want it to repeat. 146 00:09:15.117 --> 00:09:16.200 So let's see. 147 00:09:18.432 --> 00:09:21.589 Okay, it's not a function and actually it's repeat 148 00:09:21.589 --> 00:09:22.696 and not repeats. 149 00:09:22.696 --> 00:09:24.363 Okay, so my mistake. 150 00:09:25.315 --> 00:09:27.577 But now here it is, so JohnJohnJohnJohnJohn, 151 00:09:27.577 --> 00:09:29.786 five times in a row. 152 00:09:29.786 --> 00:09:32.276 Now imagine we want a space in there, 153 00:09:32.276 --> 00:09:36.109 then we would have to write a template literal 154 00:09:37.428 --> 00:09:38.678 just like this. 155 00:09:44.307 --> 00:09:47.857 Okay, so John John John and John John. 156 00:09:47.857 --> 00:09:50.434 It doesn't look much useful in this case, 157 00:09:50.434 --> 00:09:53.295 but there are some cases that we need it, and that's why 158 00:09:53.295 --> 00:09:57.588 it was also added to the new version of JavaScript. 159 00:09:57.588 --> 00:10:01.003 All right, and that's it with strings in ES6. 160 00:10:01.003 --> 00:10:03.622 For me personally the best thing here is 161 00:10:03.622 --> 00:10:06.770 the template literals, so I really like them. 162 00:10:06.770 --> 00:10:08.888 All right, so let's now move on to another 163 00:10:08.888 --> 00:10:11.971 very important feature that's also very useful 164 00:10:11.971 --> 00:10:13.950 and that's arrow functions. 165 00:10:13.950 --> 00:10:17.533 So come with me right to the next lecture.