Better String Concatenation


00:00 You might already be familiar with teed strings within JavaScript and in this

00:03 short lesson, in addition to introducing them,

00:05 we will look at two neat ways that you can use them within your I D E.

00:09 So let's go.

00:10 Here's a simple piece of code where we get this function called get person,

00:14 get some strings, store it in a person variable,

00:16 and then we want to create a greeting for this particular person. Now,

00:20 right now we are using string and cat. That is,

00:23 we are adding the string high with the variable person,

00:26 followed by some additional string to create a larger greeting message.

00:30 Template strings are designed for this exact use case where you want to

00:33 interplay some variable between some strings.

00:36 Now the standard string literal uses single coats or double coats,

00:40 but the template string literal uses back ticks within a template. Literal,

00:44 we can break into JavaScript expression mode by using dollar curly braces.

00:49 Now you are free to use any JavaScript expression over here.

00:51 Right now we're using this person variable,

00:53 and as far as the JavaScript runtime is concerned,

00:56 it'll have the same value as a string concatenation.

00:59 Now the modern name for this particular feature is called template literals,

01:02 and previously it was known as template strings.

01:04 So people use these terms interchangeably.

01:07 Now let's focus in on some I D E productivity features.

01:09 Let's go back to the version where we had the string concatenation.

01:13 Now we could convert it into a template string manually,

01:15 but fortunately within VS code,

01:17 you can click this bulb icon to start a quick fix or use the keyboard shortcut

01:21 command dot,

01:22 and one of the quick fixes available is convert to a template string.

01:26 And with this quick fix,

01:27 we get a nice modern conation of values with strings in modern JavaScript

01:30 instead of that old funky way. Now,

01:33 this particular quick fix only shows up when you are in the middle of a string

01:36 and caption to demonstrate by this can be an issue.

01:39 Let's go to an example where we don't have any string and caption and we just

01:43 have a simple string, and now we decide that, oh,

01:46 we are going to be adding the person variable in the middle of the string.

01:49 Now there is no option to convert the string into a attempted string as a quick

01:53 fix within our I D E,

01:55 so we'd have to manually convert the single coats into back takes if you wanted

01:58 to use a ED literal. Fortunately,

02:01 all hope is not lost as there is an extension called template string converter

02:05 that does this thing for us.

02:07 All that we need to do is that we need to be in the middle of some string

02:11 literal that is not a template literal and just use dollar curly braces and

02:15 it'll automatically convert whatever string we are in into a template literal.

02:20 And now we can bring in a person variable quite easily and we have a nice string

02:24 and tion without having to go into pluses or opening and closing quotes.

02:29 Now,

02:30 I have seen some developers start to use BT ticks exclusively just in case they

02:34 might need a substitution in the future.

02:35 But I don't think that's a good idea because BTT ticks are designed to signal to

02:39 the next person that there is a substitution.

02:41 And it can be confusing if you are using BT ticks without having an extra

02:45 substitution. This is of course solved by the use of this extension,

02:49 which makes it easy to convert the strings on the fly so you don't need to

02:52 prepare for the future upfront.

02:54 Thank you for joining me and I'll see you in the next one.