Template Strings Q&A

[00:00:00]
>> Speaker 1: Just a reminder on when we use backticks to separate content.
>> Brian Holt: So you can always use backticks to make strings, so I can say const someString = 'this is a string. Even if you're not doing anything special that you can always use backticks. However, if you wanna do this string interpolation or a template string, as it's called.

[00:00:25]
So, I wanna put my event.target.value in the middle of it. That's where you use the dollar sign and curly braces here. And then whatever's inside of there will actually be output into the string, right? Whereas if I just put something like that inside of here without the curly braces, it's literally going to put the output event.target.value, which is not what I want.

[00:00:47]
>> Brian Holt: And then, here, if I just had this to be normal quotes or double quotes, this is actually, literally, gonna output to the same thing as well. That's why you can see the syntax highlighting, everything's brown on it. So, you have to use backticks, otherwise you don't get that ability.

[00:01:08]
Makes sense?
>> Speaker 1: Yeah, or kind of like when you have a string inside of a string.
>> Brian Holt: Yeah, so this is basically putting these strings together, yeah.
>> Brian Holt: In other way you can think about that is this is technically call the JavaScript expression, not that you really need to know that.

[00:01:31]
But as a good rule of thumb of what an expression is, is const x = it's anything that can be on the right side of an assignment, right? So, here I can have like, this is cool.toUpperCase, right, to look something like that. So, anything I can put on the right side of that can go here.

[00:01:56]
So I could put 5 here. I don't know why you'd want to but that would work, for example.
>> Brian Holt: Or you could put Math.random. If you wanted to output a random number there, right? And you can put anything that you want there. Anything that can go in the right side of an equal signs can go there.

[00:02:18]
>> Brian Holt: Or, in this case, event.target.value.
>> Speaker 3: So, when you say anything that can go on the right side of an equal sign, basically any JavaScript code.
>> Speaker 3: Or-
>> Speaker 1: Basically, so what are you differentiating there is like I can't put an if statement there, right?
>> Speaker 3: Okay.
>> Speaker 1: Because that's a statement, not an expression per se.

[00:02:36]
>> Speaker 3: Okay, any JavaScript code that will return a value can go there.
>> Brian Holt: Okay, yeah, I'm okay with that. I'm okay with that [LAUGH]. You could have some function here that would do something and return a value. That would be fine. But you have to draw the line.

[00:02:54]
I can't put if (this), this isn't gonna work. Because if statements are they are statements, right?
>> Speaker 3: Okay, yeah, that makes sense.
>> Brian Holt: In general, you're just gonna output variables, right? That's in general. That's all you need to know about it, that they are more flexible than that.