1 00:00:00,470 --> 00:00:03,690 If you've been developing in JavaScript for a while you probably know 2 00:00:03,690 --> 00:00:07,492 all too well the pain of concatenating strings and interpolating values. 3 00:00:07,492 --> 00:00:12,130 We have relied on the plus operator to add variable values and strings together. 4 00:00:12,130 --> 00:00:14,200 It's not a very elegant solution. 5 00:00:14,200 --> 00:00:19,510 Thankfully ES 2015 provides a really neat syntax that lets us mix string literals, 6 00:00:19,510 --> 00:00:23,030 variables, and expressions but before we look at this new syntax 7 00:00:23,030 --> 00:00:27,820 let's look at some of the ways to create strings in ES5. 8 00:00:27,820 --> 00:00:31,460 If you're following along, go ahead and open the workspace for this video. 9 00:00:31,460 --> 00:00:36,830 In the file simple-string.js, I have a variable named str or 10 00:00:36,830 --> 00:00:39,900 string and I simply log into the console. 11 00:00:39,900 --> 00:00:44,280 The log method lets me concatenate multiple expressions at runtime. 12 00:00:44,280 --> 00:00:50,040 So when I run the file in the console with node simple-string.js, 13 00:00:50,040 --> 00:00:52,740 it shows me the string my favorite number is 5. 14 00:00:52,740 --> 00:00:58,850 That was a really simple one so now let's take a look at the file complex-string.js. 15 00:01:02,634 --> 00:01:07,852 In this file I have a simple string, a date then a complex string 16 00:01:07,852 --> 00:01:15,100 that merges the two together using the replace method on the string prototype. 17 00:01:15,100 --> 00:01:19,670 Now when I run this file in the console, 18 00:01:19,670 --> 00:01:23,870 it outputs the message there are 110 days until Halloween. 19 00:01:23,870 --> 00:01:28,424 Well by looking at the JavaScript you can probably tell that this could go wrong 20 00:01:28,424 --> 00:01:31,598 quickly if our sentence had more than one x character. 21 00:01:34,480 --> 00:01:38,228 So for instance, if I change the string to 22 00:01:38,228 --> 00:01:43,110 excited that there are x days until Halloween. 23 00:01:43,110 --> 00:01:47,880 Once I run this file in the console we see the x in the word excited 24 00:01:47,880 --> 00:01:50,141 replaced with the day count. 25 00:01:52,267 --> 00:01:56,332 So over in the file, extreme-string.js, we've got yet 26 00:01:56,332 --> 00:01:58,700 another way of creating a string. 27 00:02:00,320 --> 00:02:06,270 So this example creates a simple HTML table and logs it to the console. 28 00:02:06,270 --> 00:02:11,420 It's also using string concatenation to display a follower count 29 00:02:11,420 --> 00:02:14,940 via the follower count let variable. 30 00:02:14,940 --> 00:02:21,798 So in the console when I run the script node extreme-string.js 31 00:02:21,798 --> 00:02:26,371 it shows the value of follower count 34. 32 00:02:26,371 --> 00:02:30,364 And notice how the HTML tags are all left aligned. 33 00:02:34,393 --> 00:02:39,470 Next, go ahead and open the file extreme-template-strong.js. 34 00:02:39,470 --> 00:02:43,770 Now the first thing we notice in this file is that the table 35 00:02:43,770 --> 00:02:47,060 HTML variable has the same HTML content 36 00:02:47,060 --> 00:02:52,200 as the extreme-string.js file we just looked at but it's neatly formatted. 37 00:02:52,200 --> 00:02:58,120 And the values for name and followerCount are stored in the student object. 38 00:02:59,140 --> 00:03:04,410 And the second thing we noticed is the dollar sign and curly braces here. 39 00:03:04,410 --> 00:03:06,820 This is how we can easily interpolate values and 40 00:03:06,820 --> 00:03:08,590 expressions in a string using ES2015. 41 00:03:09,980 --> 00:03:14,610 Each variable that you'd like to insert into a string is wrapped with 42 00:03:14,610 --> 00:03:17,606 a $ sign in curly braces like this. 43 00:03:17,606 --> 00:03:23,170 So for instance, to insert the followerCount, into the table, 44 00:03:23,170 --> 00:03:29,225 add $ sign curly braces and say a student.followerCount. 45 00:03:30,830 --> 00:03:34,390 Now the magic ingredient that make template strings work, 46 00:03:34,390 --> 00:03:36,280 is the back tick character. 47 00:03:36,280 --> 00:03:40,760 A template string always starts and ends with a back tick. 48 00:03:40,760 --> 00:03:45,050 If you look closely you'll see that there is a small little spec on line five and 49 00:03:45,050 --> 00:03:46,980 again on line 19. 50 00:03:46,980 --> 00:03:51,930 And you can find the back tick key to the left of the number one on your keyboard. 51 00:03:51,930 --> 00:03:58,880 So over in the console if I run node extreme-template-string.js 52 00:03:58,880 --> 00:04:04,100 notice how it outputs my neatly formatted table along with the values for 53 00:04:04,100 --> 00:04:06,880 student name and followerCount. 54 00:04:06,880 --> 00:04:11,580 And if you need further processing of your template strings you can tag them 55 00:04:11,580 --> 00:04:15,020 which is a more advanced form of using template strings. 56 00:04:15,020 --> 00:04:17,280 Be sure to check the teacher's notes of this video for 57 00:04:17,280 --> 00:04:18,530 more information on tagging. 58 00:04:20,460 --> 00:04:22,910 Template strings keep our code clean and readable and 59 00:04:22,910 --> 00:04:26,950 match features that have been available in other languages for a long time. 60 00:04:26,950 --> 00:04:30,330 In the next video it will cast aside the old index of method and 61 00:04:30,330 --> 00:04:33,600 look at new string search methods to make our code easier to understand.