All language subtitles for 6. Template Strings

In this video I want to take a quick moment to talk about template strings in Javascript.

So we're going to step away from functions for just a second and we're going to talk about this new

way to create strings.

Right now every time we've created a string we've used single quotes we put our string characters inside

like we do here here and here and then we see that in the result.

So in this case I add all of this stuff up concatenating them on to each other.

And the end result is the message that prints with the user's name and their score inside of this string.

Now what we're going to do is explore the template straight as the name suggests it's a way to create

a template string.

So there are parts of this template string that are going to be static and there are other parts that

are going to be dynamic.

From a functional standpoint it's going to do exactly what we already do here but the syntax is going

to make it a lot easier to work with.

So let's go ahead and explore this syntax Double-O cancelled that lag.

And we're gonna make a regular string the string Andrew using single quotes.

This is a regular boring old string.

It's something that we've done plenty of times before.

I'm not even going to run the program.

What I want to talk about though before I talk about template strings is that we can create regular

strings using double quotes as well.

So right here I can use a double quote and I can type my message inside.

There is no difference between the two in javascript.

I used single quotes because I don't have to hit the shift key so it's just one less Kieta press.

I also think they look a bit cleaner.

You can also use double quotes for all of your strings that would work as well.

I just don't recommend using a combination of the two find which one works best for you and stick with

it for me in this course.

I'm always going to use single quotes for my regular strings.

I did just want to make you aware that this exists.

It's a regular string.

I could even concatenate something onto it plus followed by a single quoted string Mead.

So the end result would be an jimmied with no space in between.

It's perfectly fine to mix the two like this.

But as I mentioned for clarity's sake I recommend picking one and sticking with it.

The only thing we can't do is open and close with a different quote.

So I can't open Meade with a single quote and trying to close it with a double quote.

That's not valid.

If I open it with single or double I have to close it with the same.

So these are all just regular strings.

Nothing new there.

I just wanted to make you aware of the double quote syntax.

What we're going to explore now is the template string which is indeed a bit different to create a template

string.

We use the back tick key on your keyboard.

This is located to the left of the one key and it looks very similar to a single quote.

But as you'll notice it is on a slight angle.

Now here we can put anything we can put in a regular string so I can just start typing the characters

that I want to use.

I could say hey my name is followed by my name with an exclamation mark that's going to print the static

string to the screen every single time we run the program.

Now let's say we had name above let name equal and Jeru and we want to use it in the string.

Let's go ahead and actually switch the name up to something else.

I'll go ahead and use jet.

We want to put it right here although we want to leave everything before.

Hey my name is and everything after the exclamation mark alone.

So what do we do well with regular strings we would have to use string concatenation.

I would have one string.

The first part that I would add the concatenation operator to tack on name that I would add on the concatenation

operator again to tack on the exclamation mark for template strings.

We just moved to the part of the string where we want to inject the value and we use the following syntax.

It's a dollar sign followed by the opening and closing curly brace inside.

We can add a jobless script to expression.

This is where we pick what we want to put in this part of the template string.

In this case we want to put whatever is stored in the name variable.

So the end result of the stuff highlighted is going to be the string.

Jan the dollar sign and the curly brace do not make it into the final version.

This is just a syntax for injecting some sort of value.

Let's go ahead and check this out by actually running the arguments file over here.

Node arguments J.

As.

When I run it.

What do I get I get.

Hey my name is Jen.

If I change the name to something else Hey my name is victim and I rerun the script.

That is exactly what I get.

Hey my name is Vikram because it's using the new value for the name variable in this particular part

of the template string.

Now we could add as many values as we need to into this string.

You could say something like I am 12 years old or whatever their age is and this could also come from

a variable.

So I would add age right here.

At age 12 then I would add the exact same syntax dollar sign.

Curly braces inside of there.

The thing I want to inject in this case age.

Now we have a template string with two dynamic values inside of it.

I can go ahead and rerun it and I get the full message.

So what's the real advantage.

And the answer is it's a syntactical advantage so I can do the exact same thing I do here with regular

old strings and the plus operator.

The difference is that in my opinion and in the opinion of a lot of others this is way harder to read

than this down below.

This is also way harder to change.

So let's say I want to move name to the front of the string or I want to take this part of the message

and move it to the end.

Putting score in the beginning.

I have to rearrange things and also rearrange the plus operators making sure to remove the leading and

trailing spaces around appropriately.

It becomes quite a bit of a headache with template Shearing's it's really easy to rearrange things if

I want to move the first sentence after the second sentence.

I can just go ahead and cut it out.

I can remove that one space I could add a space here and I can paste it in.

So with template strings it's way easier to actually work with them using concatenation.

Yes we can get the job done.

It's just not as ideal as working with template strings.

So since we know a better way to do things let's go ahead and actually use it.

I'm going to replace the string here with a template string.

So what are we going to do.

I'm going to return and I'm going to create a template string using the back tick which automatically

gets closed for me in year.

I'm going to put everything I want so its name call and space then we are going to inject the name so

dollar sign at curly braces name.

Then after name.

I'm going to add a space hyphen space score colon.

Then I'm going to inject at the very end the actual score variable.

So this and what I have down below are going to produce the exact same output.

I just find this in much more readable and way more maintainable.

Let's go out and prove that it actually still prints the exact same result by saving the file and rerunning

things the last time we ran it.

We got this message.

If I rerun it again we get the exact same message name Anonymous score ninety nine template strings.

Once again do not really give us any new functionality.

It just gives us a better way to get things done.

It's something we're going to be using extensively throughout the course.

I'm going to remove the regular string return statement and down below.

I'm also going to delete the example we set up so we now have an example right here.

Your challenge for the video is going to be to integrate a template string into the get tip function

down below.

So let's go ahead and talk about what I'd like you to do.

Your job is to return a string a little message from get temp as opposed to returning just the actual

tip value and the string you're going to return is going to be created from a template string.

So let's go ahead and explore this right here.

The message for this data would look like the following.

A 25 percent tip on $40 the value passed in would be and the actual calculation would be 10.

So instead of just returning the number 10 I am including the number 10.

In the larger template string.

Now there are three values here.

We have 2005 to calculate this.

You just take the top percent and multiply it by 100.

We have 40 which is just passed in directly and we have 10 which comes from the calculation right here.

It's going to be your job to put all of this together inside of a template string.

You can create a couple of variables beforehand to run those calculations and then you can return the

template string much like we return a template string up above.

Take as much time as you need to get this one done and then mess around with it tried to pass in a few

different values and make sure you do see the correct message for each pause the video and when you're

done go ahead and click play

all right how that one go hopefully you were able to get things done without too much trouble.

I want to go ahead and kick things off by creating a few variables.

First up let percent equal.

And here I'm just going to take the tip present and I'm going to multiply it by 100.

That's going to convert point two over to 20 which I need for this first part.

Now for the second part you don't have to do anything.

I had that number passed in directly for the third part.

I do want to calculate the tip.

So let tip equal the total times the tip per cent that is going to give me in the case of this data

a value of 10.

And then finally I'm going to return the template string.

So right here let's go ahead and open and close some back tax and we're gonna start filling things out.

So a space followed by the percent value from up above a dollar sign curly braces.

Percent.

And then after that space actually not space we're going to use the percent sign.

Then a space tip on space dollar sign.

And this is where we put the total.

So dollar sign curly braces total.

Then after that total space would be space.

And then finally we wrap up with a dollar sign and then the actual calculated temp.

So dollar sign curly braces right inside of your tip.

Now we can actually test things out by rerunning the file.

I'm going to save my work rerun things from the terminal and I get a 25 percent tip on 40 bucks would

be ten dollars.

Everything is working well and we were able to set up this string using template strings.

Now let's go ahead and switch up the values.

I'm going to switch to the default 20 percent tip and I'm going to switch the number over to 50 if I

rerun things this time around.

I'd actually still get 10.

Let me switch this over to 60 to see a different value print area run it and I get a 20 percent tip

on 60 bucks would be $12 which is correct.

All right.

Now that we have this in place I want to show you one alternative way you could have gotten this done.

You can actually run these calculations right inside of the curly braces.

So if I wanted to I could calculate tip percent percent

Time's 100 right here I would do the exact same thing for the tip.

I could multiply the total times the tip per cent to get the actual total tip.

This would allow us to remove these two variables completely.

Now this is not necessarily what you want to do in all situations.

It's just a different way to solve the problem.

If I were to save things and rerun things we get the exact same message the calculations are still being

executed at the same they're just now embedded right in the template string.

There's going to be good in some situations but it can also create situations where the template sharing

is now much easier to read through since it includes more code and math operations.

So I'm going to actually undo those changes and bring it back to the example I had before where I simply

reference the percent variable right here and the tip variable right here.

This is all about personal preference and style.

I prefer to keep my template strings cleaner just referencing variables as opposed to trying to run

calculations right inside creating a situation that's just a bit messier.

All right.

That is it for this one.

Now that we know how to use template strings we can use them throughout the course to create more meaningful

messages.

I'm excited to continue on.

I'll see you next time.