- Introducing Strings 6:43
- Transform and Manipulate Strings 6:04
- Introducing Strings Review 5 questions
- Capture Input 4:05
- Combine Strings 8:28
- Combine and Manipulate Strings 3 objectives
- Template Literals 5:19
- Display the Value of a String on a Page 7:55
- Variables and Strings Challenge 2:57
- Variables and Strings Challenge Solution 5:32
- Combine Strings and Template Literals Review 6 questions
- Write a Template Literal 1 objective
Preview
Video Player
00:00
00:00
Introducing Strings
6:43Learn the different ways you can create and work with strings.
[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