1 00:00:00,000 --> 00:00:04,648 [MUSIC] 2 00:00:04,648 --> 00:00:09,384 [SOUND] Hi, I'm Joel, a JavaScript developer and teacher at Treehouse. 3 00:00:09,384 --> 00:00:12,230 I wanna show you how to use template literals. 4 00:00:12,230 --> 00:00:15,500 Template literals create strings in JavaScript. 5 00:00:15,500 --> 00:00:18,200 But unlike the quoted strings you're used to using, 6 00:00:18,200 --> 00:00:22,170 template literals have some great features worth knowing about. 7 00:00:22,170 --> 00:00:23,150 Let's take a look now. 8 00:00:24,500 --> 00:00:29,700 You know how to create string literals using single quotes and double quotes. 9 00:00:29,700 --> 00:00:34,682 And writing template literals is almost the same, just with backticks. 10 00:00:34,682 --> 00:00:39,660 The backtick character is in the upper left-hand corner of a QWERTY keyboard, and 11 00:00:39,660 --> 00:00:42,090 it shares a key with the tilde. 12 00:00:42,090 --> 00:00:46,490 All three of the expressions you see here will evaluate to the exact same string. 13 00:00:47,540 --> 00:00:49,610 Let's make some template literals. 14 00:00:49,610 --> 00:00:51,530 Launch a workspace on this page, or 15 00:00:51,530 --> 00:00:55,540 download the project files to work on your local machine. 16 00:00:55,540 --> 00:00:57,950 Open index.html. 17 00:00:57,950 --> 00:01:03,089 This is an HTML page with several areas where we'll be using template literals. 18 00:01:04,643 --> 00:01:09,600 At the bottom here, you see there's three JavaScript files that we're loading. 19 00:01:09,600 --> 00:01:11,770 And you can see them listed out here on the left. 20 00:01:12,890 --> 00:01:14,225 Let's preview this page in the browser. 21 00:01:16,460 --> 00:01:18,630 Here are the areas. 22 00:01:18,630 --> 00:01:20,590 We'll start with the Basic area up at the top. 23 00:01:22,280 --> 00:01:26,700 So I'll open basic.js, and you can see that we're creating 24 00:01:26,700 --> 00:01:31,400 two strings already and concatenating them together. 25 00:01:31,400 --> 00:01:34,220 And then I'm going to uncomment this, and 26 00:01:34,220 --> 00:01:39,100 you can see we're placing the result inside of a div with the class basic. 27 00:01:39,100 --> 00:01:43,710 If I save this, and switch over to our browser and refresh, 28 00:01:44,720 --> 00:01:49,490 you can see our two strings are being placed inside. 29 00:01:49,490 --> 00:01:53,120 So, let's go back and create a template literal. 30 00:01:53,120 --> 00:01:56,010 So I'm gonna copy this and just paste it below. 31 00:01:57,470 --> 00:02:00,777 And I'll change this to templateLiteral. 32 00:02:02,524 --> 00:02:04,580 And I'll use backtick characters. 33 00:02:11,846 --> 00:02:16,871 So now that we have our template literal, let's concatenate it onto the end and 34 00:02:16,871 --> 00:02:21,446 save, and then we should see our template literal appear, our string, 35 00:02:21,446 --> 00:02:23,910 template literal string. 36 00:02:23,910 --> 00:02:30,890 And if we inspect it, we'll see it was a paragraph element just like these others. 37 00:02:30,890 --> 00:02:36,970 So great, template literals work just like strings, but what else can they do? 38 00:02:36,970 --> 00:02:40,690 Well, they're very helpful with multi-line strings. 39 00:02:40,690 --> 00:02:43,800 Let's switch back to the code editor and 40 00:02:43,800 --> 00:02:47,160 open up multiline.js, and I'll show you what I mean. 41 00:02:48,778 --> 00:02:52,990 So here we're creating an unordered list of fruits. 42 00:02:52,990 --> 00:02:56,980 And you can see in JavaScript, in order to break to the next line, 43 00:02:56,980 --> 00:03:00,320 if you're creating a multi-line string, you need to add a plus at the end. 44 00:03:01,450 --> 00:03:04,450 And I'm just gonna change this a little bit. 45 00:03:04,450 --> 00:03:11,064 Because the JavaScript interpreter disregards white space, 46 00:03:11,064 --> 00:03:17,436 I can hit enter here and bring these other lines in next to it. 47 00:03:17,436 --> 00:03:19,716 And that'll be functionally the same, but 48 00:03:19,716 --> 00:03:23,650 I just find it to be a little more readable and manageable. 49 00:03:23,650 --> 00:03:26,970 So let's uncomment this line, and 50 00:03:26,970 --> 00:03:31,580 you can see that we're taking our multi-line string, our unordered list, and 51 00:03:31,580 --> 00:03:35,690 we're putting it inside the div with the class of fruits. 52 00:03:35,690 --> 00:03:39,760 So if I save this and switch over to our browser and 53 00:03:39,760 --> 00:03:42,860 refresh, you can see our list made it in. 54 00:03:44,050 --> 00:03:49,370 Now let's use a template literal to place a list of vegetables in this div. 55 00:03:51,450 --> 00:03:57,100 So back in multiLine.js, I'm gonna copy our constant declaration 56 00:03:57,100 --> 00:04:02,580 fruit list and paste it below and we'll change this fruit to vegetable. 57 00:04:05,800 --> 00:04:08,720 And we'll put a potato in there. 58 00:04:11,498 --> 00:04:19,310 And an onion, and let's put broccoli in for the last one. 59 00:04:19,310 --> 00:04:23,950 So to create this as a template literal, let's use backticks. 60 00:04:23,950 --> 00:04:27,700 And we just need to place backticks at the front and the end 61 00:04:29,680 --> 00:04:33,930 of this, and then we can delete all of these quotes and pluses. 62 00:04:39,584 --> 00:04:44,596 Like so, now this is a lot cleaner than the string, 63 00:04:44,596 --> 00:04:47,760 the multi-line string above. 64 00:04:47,760 --> 00:04:53,838 And to even clean it up some more, we can move this backtick to the line above, 65 00:04:53,838 --> 00:04:57,312 and we could put this on its own line as well. 66 00:04:57,312 --> 00:05:02,060 And really it looks just like HTML, so it's a lot more readable. 67 00:05:02,060 --> 00:05:05,300 And let's go ahead and put it on a page. 68 00:05:05,300 --> 00:05:09,860 So I'm gonna copy this line, paste it below, and 69 00:05:09,860 --> 00:05:13,010 we'll select the correct div, which is gonna be vegetables. 70 00:05:15,338 --> 00:05:22,760 And then at the very end we'll put our new vegetable list in there. 71 00:05:22,760 --> 00:05:30,340 So if I save it, switch over and refresh, we see that our list made it in. 72 00:05:30,340 --> 00:05:35,280 And if I inspect, it is indeed an unordered list just the same 73 00:05:35,280 --> 00:05:39,580 way that our fruits is an unordered list. 74 00:05:40,810 --> 00:05:45,950 So great, I wanna show you one more thing about template literals and 75 00:05:45,950 --> 00:05:47,450 I'll do that in the next video.