1 00:00:00,000 --> 00:00:04,214 [MUSIC] 2 00:00:04,214 --> 00:00:09,620 Hi, I'm Joel, a JavaScript developer and teacher at Treehouse. 3 00:00:09,620 --> 00:00:12,250 I wanna show you how to use template literals. 4 00:00:12,250 --> 00:00:15,520 Template literals create strings in JavaScript. 5 00:00:15,520 --> 00:00:18,475 But unlike the quoted strings you're used to using, 6 00:00:18,475 --> 00:00:22,162 template literals have some great features worth knowing about. 7 00:00:22,162 --> 00:00:23,140 Let's take a look now. 8 00:00:24,570 --> 00:00:29,296 You know how to create string literals using single quotes and double quotes. 9 00:00:29,296 --> 00:00:34,028 And writing template literals is almost the same, just with back ticks. 10 00:00:34,028 --> 00:00:39,610 The back tick character is in the upper left hand corner of a QWERTY keyboard, 11 00:00:39,610 --> 00:00:42,120 and it shares a key with the tilde. 12 00:00:42,120 --> 00:00:46,500 All three of the expressions you see here will evaluate to the exact same string. 13 00:00:47,560 --> 00:00:49,640 Let's make some template literals. 14 00:00:49,640 --> 00:00:51,530 Launch a workspace on this page or 15 00:00:51,530 --> 00:00:55,560 download the project files to work on your local machine. 16 00:00:55,560 --> 00:00:57,970 Open index.html. 17 00:00:57,970 --> 00:01:03,089 This is an HTML page with several areas where we'll be using template literals. 18 00:01:04,930 --> 00:01:09,880 At the bottom here, you see there's three JavaScript files that we're loading, and 19 00:01:09,880 --> 00:01:11,770 you can see them listed out here on the left. 20 00:01:12,920 --> 00:01:14,680 Let's preview this page in the browser. 21 00:01:16,740 --> 00:01:18,650 Here are the areas. 22 00:01:18,650 --> 00:01:20,616 We'll start with the basic area up at the top. 23 00:01:20,616 --> 00:01:25,570 So I'll open basic.js, and you can 24 00:01:25,570 --> 00:01:31,420 see that we're creating two strings already and concatenating them together. 25 00:01:31,420 --> 00:01:34,240 And then I'm going to un-comment this, and 26 00:01:34,240 --> 00:01:39,120 you can see we're placing the result inside of a div with the class basic. 27 00:01:39,120 --> 00:01:43,730 If I save this and switch over to our browser and refresh, 28 00:01:44,740 --> 00:01:49,520 you can see our two strings are being placed inside. 29 00:01:49,520 --> 00:01:53,160 So let's go back and create a template literal. 30 00:01:53,160 --> 00:01:56,030 So I'm gonna copy this and just paste it below. 31 00:01:57,500 --> 00:02:04,693 And I'll change this to templateLiteral, And I'll use back tick characters. 32 00:02:12,080 --> 00:02:14,740 So now that we have our template literal, 33 00:02:14,740 --> 00:02:17,636 let's concatenate it onto the end and save. 34 00:02:17,636 --> 00:02:21,787 And then we should see our template literal up here, our string, 35 00:02:21,787 --> 00:02:23,534 template literal string. 36 00:02:23,534 --> 00:02:30,940 And if we inspect it, we'll see it was a paragraph element just like these others. 37 00:02:30,940 --> 00:02:35,020 So great, template literals work just like strings. 38 00:02:35,020 --> 00:02:37,010 But what else can they do? 39 00:02:37,010 --> 00:02:40,720 Well, they're very helpful with multi-line strings. 40 00:02:40,720 --> 00:02:43,830 Let's switch back to the code editor and 41 00:02:43,830 --> 00:02:47,140 open up multiline.js, and I'll show you what I mean. 42 00:02:49,040 --> 00:02:53,020 So here we're creating an unordered list of fruits. 43 00:02:53,020 --> 00:02:57,560 And you can see in JavaScript in order to break to the next line if you're creating 44 00:02:57,560 --> 00:03:02,020 a multi-line string, you need to add a plus at the end, and I could. 45 00:03:02,020 --> 00:03:06,603 I'm just gonna change this a little bit, because the JavaScript 46 00:03:06,603 --> 00:03:10,870 interpreter disregards white space, I can hit Enter here. 47 00:03:11,950 --> 00:03:19,660 And bring these other lines in next to it, and that'll be functionally the same, 48 00:03:19,660 --> 00:03:22,766 but I just find it to be a little more readable and manageable. 49 00:03:22,766 --> 00:03:25,415 So let's un-comment this line, and 50 00:03:25,415 --> 00:03:30,796 you can see that we're taking our multi-line string, our unordered list, 51 00:03:30,796 --> 00:03:34,955 and we're putting it inside the div with a class of fruits. 52 00:03:34,955 --> 00:03:39,613 So if I save this and switch over to our browser, 53 00:03:39,613 --> 00:03:44,070 and refresh, you can see our list made it in. 54 00:03:44,070 --> 00:03:50,444 Now let's use a template literal to place a list of vegetables in this div. 55 00:03:50,444 --> 00:03:55,167 So back in multiline.js, I'm gonna copy our constant 56 00:03:55,167 --> 00:03:58,890 declaration fruitList and paste it below. 57 00:04:00,000 --> 00:04:02,600 And we'll change this fruit to vegetable. 58 00:04:05,570 --> 00:04:08,710 And we'll put a potato in there. 59 00:04:11,702 --> 00:04:14,768 And an onion. 60 00:04:14,768 --> 00:04:19,202 And let's put broccoli in for the last one. 61 00:04:19,202 --> 00:04:23,974 So to create this as a template literal, let's use back ticks. 62 00:04:23,974 --> 00:04:29,742 And we just need to place back ticks at the front and the end of this, 63 00:04:29,742 --> 00:04:34,390 and then we can delete all of these quotes and pluses. 64 00:04:38,959 --> 00:04:46,324 Like so, now this is a lot cleaner than the string, the multi-line string above. 65 00:04:46,324 --> 00:04:49,320 And to even clean it up some more, 66 00:04:49,320 --> 00:04:53,814 we could move this back tick to the line above, and 67 00:04:53,814 --> 00:05:00,060 we could put this on its own line as well, and it looks just like HTML. 68 00:05:00,060 --> 00:05:04,400 So it's a lot more readable, and let's go ahead and put it on the page. 69 00:05:05,450 --> 00:05:08,798 So I'm gonna copy this line, paste it below, and 70 00:05:08,798 --> 00:05:13,040 we'll select the correct div, which is gonna be vegetables. 71 00:05:15,640 --> 00:05:22,790 And then at the very end, we'll put our new vegetableList in there. 72 00:05:22,790 --> 00:05:30,277 So if I save it, switch over and refresh, we see that our list made it in. 73 00:05:30,277 --> 00:05:34,834 And if I inspect, it is indeed an unordered list, 74 00:05:34,834 --> 00:05:39,834 just the same way that our fruits is an unordered list. 75 00:05:39,834 --> 00:05:45,060 So great, I want to show you one more thing about template literals and 76 00:05:45,060 --> 00:05:47,460 I'll do that in the next video.