Importance of Natural Resources

Template Literals (Template Strings) in JavaScript | ES6 | ES2015


In this video we are going to talk about ES6’s
temperate literal or some people call them template strings. Now template literals are really good for
string interpretation and multiline strings. So lets go ahead and look at a few different
examples. So say we had a function in here and we will
just call it welcome message. What this function is going to do is it will
take in a first name, a last name as well as an email address. And then it is going to return us a string
after concatenating a few of these together. So we will say hello plus first name plus
last name and then what we will say is the email that you used to sign up is and then
we will go ahead and add the email address. So now whats going to happen is when we invoke
this welcome message what we will do is pass in the first name, the last name, and then
the email address. This is all probably not new to you so we
just get that string. But now what if we wanted to come in here
and we wanted to put quotes around this email address just to emphasize the email address
a little bit more. We probably know how to do that we need to
do one of a few different things we need to come here and change these to single quotes
or we can use some escape characters so thats what we will do. So we will come in here and say plus lets
just do this line escape character right there with another quote, and at the end of this
what we will do is we will add a quote escape character and then two more quotes. So now what should happen is when this function
is invoked we get that exact same string but we’d wrapped our email address in this quotes
so what we are trying to emphasize here is the value and the template literals provide
because now what we can do is instead of having this huge mess right here we can figure out
where the escapes characters go and trying to figure out if we should add pluses and
quotations what we can do is something like this. We can add a backtick here as well as a backtick
to the end of our string so instead of using double quotes or single quotes we are using
backticks. And then whenever we have a variable we want
to concatenate that onto the string instead of doing this plus quotations game all we
have to do is do ${} and that will evaluate the specific variable. So we can do that here as well and then you
will notice here that we had to do our escape character so we don’t have to do that anymore
because we can just do email and then we can put quotes around that. So now when this function is invoked whats
going to happen is we get that exact same string but instead of our code looking like
this, being kinda confusing both to the developer who wrote it but also to the developer who
reads it now we can just do something like this and it is a lot more clean. So with this example, you have seen how template
literals make string concatenation easier lets take a look at an example with multiline
strings. Now what if instead of creating a function
that just returned us a string which was kinda like a welcome message, what if we wanted
that function to return us a string template? So this isn’t really common in React because
we have JSX but in other frameworks and other libraries this is actually pretty common. So what I am going to do is just convert this
into a normal looking string HTML template. Alright so now we have this welcome template
function and when we invoke it whats going to happen is we will get back this HTML looking
string. So rather than just this sentence, what we
are doing is we want to get a string back that we can embed into the DOM. But you will notice here, that the problem
with this is it’s really hard to read and as you probably imagined it was kinda hard
to write because not only do we have to now deal with string concatenation but were also
dealing with all of these HTML elements as well. And other problem with this is if we wanted
to fix that, if we wanted to make it a little bit more easier to read when you are looking
at it what you would have to do is something like this where you would have to come in
here and where ever you wanted a new line you would then have to go ahead and add these
plus signs and eventually you would get something that looked like that. And then from here what you can do if you
wanted just so you can see this working, lets say document.body.innerHtml equals the invocation
of our welcome template so you’ll notice that we do get this thrown into the DOM so everything
is working but again using regular strings to concatenate and create this template it’s
just really annoying for the developer and also any developer that is going to read your
code later. So what we can do using template literals
is we can come and we can change code that looks like this to look like something like
this. Where now we can go ahead and wrap everything
in a backtick. And we can get rid of all of these and we
can actually even bring this down to a new line. We will wrap our variables inside of our ${} syntax. Get rid of all of the plus signs. And eventually what we are left with is something
that looks like this so we are going to get the exact same result, but because template
literals support multiple lines now instead of having a really gross and really annoying
function that looks like this. Now what we have done using template literals
we have created a function template that looks like that.


Reader Comments

  1. Can you please add paypal or bitcoin payment system for your course site? , I am from India and am not able to pay by my card.

  2. 🚀 Try our new 2019 React Course – https://tylermcginnis.com/courses/react?s=youtube-template-literals-in-javascript

Leave a Reply

Your email address will not be published. Required fields are marked *