Better String Concatenation

You might already be familiar with teed strings within JavaScript and in this short lesson, in addition to introducing them, we will look at two neat ways that you can use them within your I D E. So let's go. Here's a simple piece of code where we get this function called get person, get some strings, store it in a person variable, and then we want to create a greeting for this particular person. Now, right now we are using string and cat. That is, we are adding the string high with the variable person, followed by some additional string to create a larger greeting message. Template strings are designed for this exact use case where you want to

interplay some variable between some strings. Now the standard string literal uses single coats or double coats, but the template string literal uses back ticks within a template. Literal, we can break into JavaScript expression mode by using dollar curly braces. Now you are free to use any JavaScript expression over here. Right now we're using this person variable, and as far as the JavaScript runtime is concerned, it'll have the same value as a string concatenation. Now the modern name for this particular feature is called template literals, and previously it was known as template strings. So people use these terms interchangeably.

Now let's focus in on some I D E productivity features. Let's go back to the version where we had the string concatenation. Now we could convert it into a template string manually, but fortunately within VS code, you can click this bulb icon to start a quick fix or use the keyboard shortcut command dot, and one of the quick fixes available is convert to a template string. And with this quick fix, we get a nice modern conation of values with strings in modern JavaScript instead of that old funky way. Now, this particular quick fix only shows up when you are in the middle of a string and caption to demonstrate by this can be an issue. Let's go to an example where we don't have any string and caption and we just

have a simple string, and now we decide that, oh, we are going to be adding the person variable in the middle of the string. Now there is no option to convert the string into a attempted string as a quick fix within our I D E, so we'd have to manually convert the single coats into back takes if you wanted to use a ED literal. Fortunately, all hope is not lost as there is an extension called template string converter that does this thing for us. All that we need to do is that we need to be in the middle of some string literal that is not a template literal and just use dollar curly braces and it'll automatically convert whatever string we are in into a template literal.

And now we can bring in a person variable quite easily and we have a nice string and tion without having to go into pluses or opening and closing quotes. Now, I have seen some developers start to use BT ticks exclusively just in case they might need a substitution in the future. But I don't think that's a good idea because BTT ticks are designed to signal to the next person that there is a substitution. And it can be confusing if you are using BT ticks without having an extra substitution. This is of course solved by the use of this extension, which makes it easy to convert the strings on the fly so you don't need to prepare for the future upfront.

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