Check out a free preview of the full Introduction to JavaScript course
The "Strings" Lesson is part of the full, Introduction to JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Brian introduces the string primitive data type.
Transcript from the "Strings" Lesson
[00:00:00]
>> Brian Holt: So I'm gonna just delete all of this. You're welcome to save it, but I'm just gonna keep working out of the same file here. So here I'm gonna say const myName =, and you can put whatever your name is here.
>> Brian Holt: Now, what's key here is you're gonna need these double quotes.
[00:00:19]
You can also put single quotes there, and you can even put back ticks. A back tick is the one that on the same key as the tilde on an American keyboard. That's next to the 1, right? So it's not quite a single quote. So you can see what a single quote is right there next to each other.
[00:00:41]
But for now, I'm just gonna put double quotes. They all do roughly, in this particular case, they do all exactly the same thing, okay? And now I have this string of characters right next to each other, it's being stored in myName. And now if I say console.log(myName). I save that, and then I come over here in my browser and refresh it.
[00:01:09]
You can see here that's actually outputting myName to the console. This is called a string. And it's called a string because it's a bunch of characters next to each other, or a string of characters.
>> Brian Holt: But basically, if you wanna store words or anything like some sort of like literal value like that into some sort of variable, this is how you do it.
[00:01:35]
And the quotes are very important. So if I took these quotes away, and tried to do this. If I refresh here it's gonna say, unexpected token identifier. Because it doesn't know what to do with that. It's expecting Brian to be some sort of variable, and it's like, I don't know what that is, right?
[00:01:53]
I don't know what to do with that, I'm just gonna quit. And that's when you see here a syntax error. So whenever you see a syntax error, it's basically saying hey, your grammar is bad, right? It's like when your English teacher is editing your essay and says well, you didn't use this comma correctly or something like that, that's what a syntax error is.
[00:02:13]
They're actually usually the best kind of errors to have, because they're usually pretty easy to fix for the most part. In fact,
>> Brian Holt: If you click on this experiment, right now I have a syntax error on line 1. If I click on this experiments.js, it actually says hey, that line's bad.
[00:02:35]
Something about, I don't understand this line. And it's easier to kind of pick up what's going in there.
>> Brian Holt: Okay, so now if I go put that back in quotes, delete that, refresh this. You have Brian Holt here displaying. So let's take this one step further. Let's say instead of having my name here, I'm gonna have firstName.
[00:03:02]
>> Brian Holt: I'm gonna have lastName.
>> Brian Holt: Holt.
>> Brian Holt: And then I'm gonna have here const sentence = hello, space, notice there's a space right there. Then I'm gonna say + firstName +. Let's just expand this for a second so you can read it a little bit easier. Okay, and then I'm gonna put + space.
[00:03:37]
And notice that I'm putting another space here, a literal space in between the quotes. lastName,
>> Brian Holt: + exclamation point, how are you?
>> Brian Holt: Then I'm gonna log out that instead of myName right there on line 6.
>> Brian Holt: Now this looks a little bit odd, wouldn't you say? Like, what's what's going on with this space here?
[00:04:20]
Well, what happens if we don't have the space, right? The computer's gonna say, well, I'm just I'm gonna connect firstName and lastName right next to each other. And there's gonna be no space between them, right? [COUGH] And there should be a space between a first name and last name.
[00:04:34]
So therefore, that's why we're putting the space here is to let the computer know that you should be spacing that out. You have to remember that the computer's going to do literally everything you tell it to do, right? And if you don't be very explicit, like I want you to do this, it doesn't get what you're talking about.
[00:04:52]
>> Brian Holt: So now if I save that and refresh over here.
>> Brian Holt: You can see that it's outputting like that. So this is called string concatenation, cuz we're connecting strings together. And just to demonstrate to you what I was talking about, I'm gonna get rid of this space here.
[00:05:14]
So now it's just firstName + lastName.
>> Brian Holt: Now if I refresh here, notice that BrianHolt is all shoved together. Same thing here, that if I take this space out here,
>> Brian Holt: It'll shove all of that together.
>> Brian Holt: So you have to be very explicit about where the spaces go.
[00:05:37]
>> Speaker 2: So it looks like it works if you don't have a space between the + and the constants, right?
>> Brian Holt: Right, like here? Let's make this larger.
>> Speaker 2: Between Hello and firstName, I could say Hello + firstName, no spaces.
>> Brian Holt: So it's gonna work, right, but it's not going to accomplish what you're actually wanting it to do, right?
[00:05:58]
Cuz if you go back over here and look, notice that Hello and Brian are shoved together.
>> Speaker 2: Yeah, so you could just add the space inside of the first string.
>> Brian Holt: Right.
>> Speaker 2: Hello space.
>> Brian Holt: Correct.
>> Speaker 2: Yeah, and then take out the space around the plus
>> Brian Holt: So you are saying like here?
[00:06:14]
>> Speaker 2: Yeah,
>> Brian Holt: Yeah that space is technically optional.
>> Speaker 2: Okay.
>> Brian Holt: Actually let's triple check before I made that assertion. Yeah, that's just for clarity's sake, right?
>> Speaker 2: Right, for readability
>> Brian Holt: Yeah.
>> Brian Holt: Like here, I can put all that space there, and this actually will still work.
[00:06:33]
Cuz JavaScript just sees a space there and shoves it all together.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops