1 00:00:00,750 --> 00:00:01,770 In this video. 2 00:00:01,800 --> 00:00:03,150 Let's talk about. 3 00:00:03,960 --> 00:00:07,200 JavaScript templates literals. 4 00:00:07,470 --> 00:00:18,630 So I can say that the way we are combining or adding string together in this way is old school ways. 5 00:00:18,870 --> 00:00:22,640 There is a new method in JavaScript called template lettre. 6 00:00:22,650 --> 00:00:23,990 Or a way of what? 7 00:00:24,060 --> 00:00:26,240 Doing this in a much better way. 8 00:00:26,250 --> 00:00:28,160 So let me show you what I mean. 9 00:00:28,170 --> 00:00:35,790 So let me comment out this once and now let me have some enough room to talk about JavaScript templates, 10 00:00:35,820 --> 00:00:36,690 literals. 11 00:00:36,720 --> 00:00:44,220 So let me have a comment here and code as JavaScript JS and then template. 12 00:00:45,530 --> 00:00:48,290 Template Literals. 13 00:00:49,090 --> 00:01:00,610 So the same name can be also called as temporary strings, string template and back tick syntax. 14 00:01:00,730 --> 00:01:02,770 Okay, one, one, one name. 15 00:01:02,770 --> 00:01:04,360 We have different names for it. 16 00:01:04,420 --> 00:01:05,860 So let me write down for you here. 17 00:01:05,870 --> 00:01:07,870 One is called the Temporal Trust. 18 00:01:07,900 --> 00:01:11,110 It can be also call us strength templates. 19 00:01:13,630 --> 00:01:16,870 And then you can also call it as back tick. 20 00:01:17,890 --> 00:01:18,790 Syntax. 21 00:01:19,980 --> 00:01:24,740 And then we can also call it as what, temporarily trust or temporary strengths. 22 00:01:24,940 --> 00:01:25,400 Okay. 23 00:01:25,420 --> 00:01:29,070 But after that word it so temperate templates. 24 00:01:33,320 --> 00:01:34,270 Template. 25 00:01:38,070 --> 00:01:39,240 Template strings. 26 00:01:39,990 --> 00:01:40,630 Perfect. 27 00:01:40,650 --> 00:01:46,650 So how can we write or combine string in a nice way? 28 00:01:46,680 --> 00:01:53,100 So for this method, we have a lot of flexibility that can make our life easier. 29 00:01:53,310 --> 00:01:57,750 So let me show you how we can also create a string in a different way. 30 00:01:57,870 --> 00:02:00,460 So let me use the back take. 31 00:02:00,550 --> 00:02:06,450 Syntax is what you call the back tick syntax. 32 00:02:07,290 --> 00:02:08,100 Here we go. 33 00:02:08,130 --> 00:02:13,420 Now let me declare a variable called string as str is equal to. 34 00:02:13,440 --> 00:02:20,850 Remember how we can create a string using the double code or a single code so this or that. 35 00:02:20,850 --> 00:02:24,150 By using the temporarily drives, we use the back. 36 00:02:24,150 --> 00:02:28,950 Take this character or this symbol here and here. 37 00:02:28,950 --> 00:02:31,410 I can write any name inside. 38 00:02:31,410 --> 00:02:36,540 So let me call this one as message for now. 39 00:02:36,540 --> 00:02:39,390 See this one message so I can say that. 40 00:02:41,430 --> 00:02:43,290 Good day. 41 00:02:44,490 --> 00:02:46,540 Brother like that. 42 00:02:46,560 --> 00:02:52,410 So if I console.log message, I'm going to have the same as before. 43 00:02:52,440 --> 00:02:53,490 If I save it. 44 00:02:53,520 --> 00:02:56,430 Because the good day, brother, I have it here. 45 00:02:56,800 --> 00:02:58,980 So if I use this single code. 46 00:03:00,050 --> 00:03:04,730 Or cynical like this one is also the same brother. 47 00:03:04,760 --> 00:03:09,470 But for the back take we have a lot of flexibilities. 48 00:03:09,620 --> 00:03:14,960 For example, we can write double code inside. 49 00:03:15,880 --> 00:03:17,290 DD back take. 50 00:03:17,320 --> 00:03:20,800 So let me declare the same variable here at key. 51 00:03:21,670 --> 00:03:27,430 Let me say const message two is equal to back take. 52 00:03:27,610 --> 00:03:28,510 And now. 53 00:03:28,540 --> 00:03:31,250 Single code or double code? 54 00:03:31,270 --> 00:03:33,550 I can still write it inside. 55 00:03:33,550 --> 00:03:35,740 So let's say good. 56 00:03:37,520 --> 00:03:38,720 Good evening. 57 00:03:41,550 --> 00:03:42,610 Good evening. 58 00:03:42,630 --> 00:03:43,380 Like that. 59 00:03:43,380 --> 00:03:48,350 So I can also bring have to close it like that. 60 00:03:48,360 --> 00:03:56,930 So with this one, when I save it, let me save this one, then console.log this one and see we still 61 00:03:56,940 --> 00:04:01,050 I see the quotation mark on the string that is perfect. 62 00:04:01,560 --> 00:04:11,190 And the cool part is that I can also write the same syntax on a multi line. 63 00:04:11,190 --> 00:04:15,990 So let me show you what is called multi-line string. 64 00:04:17,120 --> 00:04:18,500 So how can I do that? 65 00:04:18,649 --> 00:04:23,450 Okay, so let's say that I want to write some long format messages, so let me comment out this one. 66 00:04:23,570 --> 00:04:26,390 And now here as const. 67 00:04:27,680 --> 00:04:30,590 Cost is my message. 68 00:04:31,660 --> 00:04:35,540 My message is echoed, and I want to write some long messages. 69 00:04:35,560 --> 00:04:41,890 Let's say that we come to our application now and let's take you around how the application works. 70 00:04:41,990 --> 00:04:48,010 We see that sometimes you write on one line, you lose a little bit, but we can do the same thing using 71 00:04:48,010 --> 00:04:50,170 the multi-line syntax, using the template. 72 00:04:50,410 --> 00:04:51,400 So how does it go? 73 00:04:51,520 --> 00:04:58,420 So with this one, after I break back, take our hit enter like that or better so I can even bring it 74 00:04:58,420 --> 00:04:59,860 here like that. 75 00:05:00,010 --> 00:05:02,890 So I can write anything inside this. 76 00:05:02,890 --> 00:05:03,820 I can see that. 77 00:05:04,620 --> 00:05:06,240 Welcome to. 78 00:05:07,030 --> 00:05:08,650 Our application. 79 00:05:12,250 --> 00:05:17,920 And then SpaceX try to make sure. 80 00:05:19,660 --> 00:05:22,480 Try to make sure you. 81 00:05:24,240 --> 00:05:25,080 Have. 82 00:05:26,150 --> 00:05:26,900 And. 83 00:05:27,770 --> 00:05:28,600 Account. 84 00:05:28,610 --> 00:05:33,320 So this one, when I save it, it's going to treat it on one line. 85 00:05:33,320 --> 00:05:39,220 But if I use the double code or single code, I'm going to have some error. 86 00:05:39,230 --> 00:05:45,530 So let's try to console the message here, message and MSG. 87 00:05:46,100 --> 00:05:50,210 When I save it, we see that I have it as before. 88 00:05:50,240 --> 00:05:50,990 That is great. 89 00:05:51,080 --> 00:05:54,280 See I can write it on one line on the multi line. 90 00:05:54,290 --> 00:05:54,890 Perfect. 91 00:05:54,890 --> 00:05:55,130 You see. 92 00:05:55,130 --> 00:05:55,500 How is it. 93 00:05:55,970 --> 00:05:57,050 This one looks nice. 94 00:05:57,200 --> 00:06:02,810 So this, this syntax is commonly used, especially in React. 95 00:06:02,840 --> 00:06:09,430 If you're familiar with JavaScript, library or frameworks, we add components normally use this back, 96 00:06:09,440 --> 00:06:13,250 take to inject some juice into the react component. 97 00:06:13,250 --> 00:06:17,840 That is one part that's one flexibility using the template literals. 98 00:06:18,020 --> 00:06:24,140 And one cool thing I like about template is what it's called the interpolation, meaning that we can 99 00:06:24,140 --> 00:06:26,630 add some dynamic values into it. 100 00:06:26,660 --> 00:06:30,470 So let me show you how this is really important to understand. 101 00:06:30,500 --> 00:06:32,930 We call it as word interpolation. 102 00:06:36,230 --> 00:06:40,640 So let's say that I have a variable called age, which is equal to 30. 103 00:06:41,870 --> 00:06:49,040 And now here I have a message that comes, let's say welcome. 104 00:06:49,250 --> 00:06:49,780 Let me see. 105 00:06:49,820 --> 00:06:51,200 Work on, for example. 106 00:06:52,420 --> 00:06:53,310 WorldCom. 107 00:06:53,740 --> 00:06:56,530 And now we're companies is equal to BackTalk. 108 00:06:56,920 --> 00:06:58,240 And now I can say that. 109 00:07:01,440 --> 00:07:05,530 This is your age. 110 00:07:05,550 --> 00:07:08,540 Then h how can I add some interpretation? 111 00:07:08,550 --> 00:07:15,900 Meaning we can add any I mean logic statement inside this particular interpretation, for example, 112 00:07:15,900 --> 00:07:17,850 we can inject some dynamic value. 113 00:07:18,000 --> 00:07:23,400 So how can I add a number inside this template literature here? 114 00:07:23,850 --> 00:07:30,330 If you are doing it using the the double code you have, you have to do what is called concatenation 115 00:07:30,510 --> 00:07:32,760 using the plus time for this one. 116 00:07:32,910 --> 00:07:34,200 We don't do it that way. 117 00:07:34,230 --> 00:07:38,070 So here you bring in your dollar sign and then your carry basis. 118 00:07:38,070 --> 00:07:40,470 And here I can write any valid. 119 00:07:41,750 --> 00:07:49,430 JavaScript syntax here inside this I mean back to inside this particular I mean temporarily try so here 120 00:07:49,430 --> 00:07:52,250 I would inject I would inject the H. 121 00:07:52,400 --> 00:07:54,470 So if I console.log where. 122 00:07:54,470 --> 00:07:55,340 Come here. 123 00:07:57,140 --> 00:07:57,940 WorldCom. 124 00:07:57,950 --> 00:07:58,740 You see that? 125 00:07:58,760 --> 00:08:00,740 This is your age for this one. 126 00:08:00,740 --> 00:08:02,650 I don't need any spacing. 127 00:08:02,660 --> 00:08:04,010 I don't need anything. 128 00:08:04,040 --> 00:08:08,690 If you are doing this using the concatenation, that is a plus sign. 129 00:08:08,690 --> 00:08:10,460 Let me show you how we are going to do this one. 130 00:08:10,460 --> 00:08:12,080 So let me remove this one from here. 131 00:08:12,080 --> 00:08:17,900 And I have my quotation mark here and my quotation mark here as that. 132 00:08:17,900 --> 00:08:20,270 So let's see, how can I add dynamic value into it? 133 00:08:20,270 --> 00:08:28,100 So for this one, unless I add plus and now the age here like that, let's save it. 134 00:08:28,100 --> 00:08:29,690 And now let's check the console. 135 00:08:30,470 --> 00:08:37,309 So if I search for work, I see that it has been combined together unless I add additional space. 136 00:08:38,210 --> 00:08:41,510 Quotation mark space and then plus. 137 00:08:41,720 --> 00:08:43,730 Now let's check for you. 138 00:08:43,880 --> 00:08:45,730 It's that now it's back to normal. 139 00:08:45,740 --> 00:08:48,860 So this syntax and then this one. 140 00:08:49,220 --> 00:08:50,420 This one. 141 00:08:52,980 --> 00:08:59,460 They say which one is shortest to use and this is how it is the best way to go. 142 00:08:59,610 --> 00:09:04,580 So to be familiar with how to use the template trials, we're going to use this one a lot. 143 00:09:04,590 --> 00:09:11,160 Then this video, let's talk about one method called string length and then you have a.