Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Basics!
You have completed JavaScript Basics!
Preview
Learn the different ways you can create and work with strings.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey, welcome back.
0:04
You've learned that in order for
0:06
a JavaScript program to do anything,
it must be given information to work with.
0:07
In the previous section,
you use variables to store and
0:12
keep track of information that your
program could use and manipulate.
0:15
That information put into
a variable is called a value.
0:18
But, what exactly are you
storing with values?
0:21
Values come in many different types
falling into categories called data types.
0:24
All programming languages
have built-in data types and
0:29
treat each in a different way.
0:32
Now, at this point you've used
two JavaScript data types,
0:34
strings and numbers.
0:37
Numbers or numeric data types are used for
making calculations like adding,
0:39
subtracting.
0:43
Computing total costs,
keeping track of a game score, and so on.
0:44
For example, a newsfeed application like
Reddit might use numbers to calculate and
0:48
keep track of how many
upvotes a post receives.
0:53
Strings are used for words, sentences,
and other texts in your program.
0:55
You write a string as a series of letters,
digits, and
1:00
other characters inside single or
double quotation marks.
1:02
The characters are strung together.
1:05
You've already seen strings in action
when you use console.log and alert.
1:07
You pass each a string.
1:10
You'll use strings all
the time when programming.
1:13
And as you'll learn, there are several
different ways you can create and
1:16
work with strings.
1:18
To code along with me, launch the new
workspace with this video and
1:20
open the file strings.js,
located inside the js folder.
1:24
I've also updated the script tag in
index.html to point to this file.
1:29
So each time you want to add a message
to a web page, pop up an alert or
1:35
collect information from a web form,
you're going to deal with strings.
1:40
For example, when you wrote this statement
earlier, the message in quotes Hello,
1:44
world, it's called the string.
1:48
Again, a string is a series of letters,
numbers,
1:50
and other characters
inside quotation marks.
1:53
All of these are examples of strings.
1:56
A string can also contain HTML tags,
like the h1 tags in the bottom string.
1:59
The quotation marks around a string
instruct the JavaScript engine
2:03
that it should treat the contents
inside as a regular set of characters.
2:07
JavaScript lets you use either double or
single quotes to create a string.
2:13
You just need to be consistent.
2:17
For example,
if you begin a string with a double quote,
2:19
you need to end the string
with a double quote.
2:23
Likewise, if you begin
a string with a single quote,
2:27
you need to end it with a single quote.
2:30
Otherwise, JavaScript is going to
produce a syntax error, in both cases.
2:33
For example, the console lets me know that
there's an invalid or unexpected token.
2:39
Now, things get a little tricky when you
wanna put a quote mark inside a string.
2:52
For example, if you wanted to put
I'm a programmer in a string,
2:58
you need to be careful with these
single quotation mark in I'm.
3:04
If you create a string using single
quotes, you'll encounter a syntax error.
3:09
Notice how the console lets me know
that an unexpected identifier is
3:14
causing the syntax error.
3:19
The single quote starts the string, but
the next single ' in I'm ends the string,
3:20
at least according to
the browser's JavaScript engine.
3:26
So the rest of the characters are treated
as if they're outside the string and,
3:30
therefore, produce an error.
3:34
Now, one solution is to use double quotes
to create a string that has one or
3:36
more single quotes inside it.
3:41
Since the first quotation mark is
a double quote, the JavaScript
3:46
engine will not end the string until it
finds the next double quotation mark.
3:50
Likewise, you can use single
quotes to create a string,
4:01
whenever you need double
quotes inside a string.
4:04
For example, if you wanna put
an htmlSnippet inside a string and
4:07
the tag requires an attribute,
4:11
which you normally write using double
quotes, you'd write it like this.
4:13
There's yet
another way to put a quote into a string.
4:35
You can use what's called
an escape character.
4:38
I'll change the message
string back to single quotes.
4:41
And if you include a backslash before
the quotation mark inside the string,
4:46
the JavaScript engine treats the quote
mark like any other character.
4:50
It's literally just a quote
mark character at this point.
4:54
Notice how it doesn't appear
in the console output.
4:58
You can use the backslash before
either single or double quote marks.
5:02
Finally, keep in mind that
the JavaScript engine will also produce
5:08
an error if you try to write a string
on two or more lines, like so.
5:13
On the first line I'll write Hello,
students.
5:20
On the next line,
Welcome to JavaScript basics.
5:26
And on a third line I
hope you learn a lot.
5:35
Logging the value of the variable
multiline produces a syntax error.
5:44
It says Invalid or unexpected token.
5:51
Well, the JavaScript engine
evaluates each line here separately.
5:54
So according to the JavaScript engine,
the first quote starts a string, but
5:59
it doesn't have a closing a quote mark.
6:04
The second line is not
wrapped in quotes at all.
6:06
And the third line is missing
the first quotation mark.
6:09
So if you wanna write
a string on multiple lines,
6:14
you need to escape any new line
characters with a backslash.
6:16
Adding a backslash at the end of each
line tells the JavaScript engine that
6:21
the string should continue
to the next line.
6:25
That way you avoid any errors.
6:27
In a later video, you'll learn
a more elegant way to create and
6:32
work with strings with a feature
called template literals.
6:35
Up next, you'll learn ways to
transform and manipulate strings.
6:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up