- 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
Transform and Manipulate Strings
6:04JavaScript provides additional functionality to use with strings via "properties" and "methods." Learn how to use the '.length' property, as well as the '.toUpperCase()' and '.toLowerCase()' methods.
There is so much power built
into the JavaScript language.
0:00
When you use a string,
0:03
the JavaScript engine treats it
as an object behind the scenes.
0:04
Now don't worry too much about
the word object right now.
0:08
Just know that because strings
are treated as objects,
0:11
JavaScript unlocks a slew of additional
functionalities you can use with
0:14
strings using what are called
properties and methods.
0:18
For example, you're able to transform a
string by converting all of its characters
0:21
to lowercase or uppercase.
0:25
You can find the length of a string or
a number of characters inside it,
0:27
even combine several strings into one,
and lots more.
0:30
Let me teach you why this is useful.
0:33
In your workspace, open the file named
transform.js located inside the js folder.
0:36
And let's update the script
tag in index.html so
0:43
that it points to transform.js.
0:47
In JavaScript,
strings are not only a type of data.
0:54
They're also objects that have properties.
0:58
For example,
you can find the length of a string, or
1:00
the number of characters in it, by
looking at the string's length property.
1:03
Let's declare a variable named passphrase
and store a string value in it.
1:07
You can find out how many characters
are in this string by looking at
1:18
the length property like this,
passphrase.length.
1:23
Let's print this out to
the console using console.log.
1:29
The console prints the number 11.
1:36
That's the number of
characters in this string,
1:39
including the space between Open and
Sesame.
1:44
I'll change the value of this variable
to the word Hi and see what happens.
1:48
Now the console prints 2.
1:56
You can use the length property for
various programming tasks.
2:00
For example, to make sure that a user
set up a password that's at least 10
2:05
characters long but
no longer than, say, 20, or
2:09
to make sure that a required input field
is not empty or has a length of zero.
2:12
So now you may be wondering,
2:17
what does the dot between the variable
name and the length keyword mean?
2:19
As you learned at
the beginning of this video,
2:25
strings are treated as
what are called objects.
2:27
So the string value stored in
the passphrase variable is considered
2:29
an object, and different types of
objects have different properties.
2:33
We'll talk a little more about objects
throughout this course, but for
2:37
now just understand that you can access
a property of an object using a dot.
2:41
A property is kind of like a variable,
it holds information.
2:45
A string's length property, for
example, contains a number,
2:48
the number of characters
inside the string.
2:52
You can use the length
property on any string,
2:54
even a literal collection of
characters inside quotes like this.
2:58
Because this string has
18 characters inside it,
3:05
its length property is 18.
3:10
Remove one character, and
its length value changes to 17.
3:13
Like a variable,
a property is dynamic and can change.
3:19
A method is something that
you can do with an object,
3:23
an action that you can perform
on a string, for example.
3:26
JavaScript provides lots of
different methods to use on strings.
3:29
I'll start by teaching you two useful
methods, toUpperCase() and toLowerCase().
3:33
You might be able to guess what each
of these do just by their name.
3:39
toUpperCase takes a string and
converts it to all uppercase letters, and
3:42
toLowerCase converts the string
to all lowercase letters.
3:46
Notice the parentheses at the end.
3:50
The parentheses let you know
that these are methods,
3:53
like commands you can perform on a string.
3:56
Back in my workspace, I'll change
the string stored in the passphrase
3:58
variable to something longer,
like I Have Spoken,
4:03
then convert it to all lowercase
letters using the toLowerCase method.
4:07
Within console.log, I'll type the name of
the variable which holds the string value,
4:12
a dot, and the method name, toLowerCase().
4:19
This is like earlier when we added
a dot to access the length property.
4:23
The main difference is that there
are now a pair of parentheses,
4:27
which again indicates that this
is a method of the string.
4:31
We're performing some action on it.
4:34
In fact,
you've already worked with other methods.
4:36
console.log, for example,
is a method for the console.
4:38
Save the file and, over in the console,
notice how all the letters
4:43
are now lowercase,
including the i, the h, and the s.
4:48
Keep in mind that the toLowercase() method
doesn't change the original string or
4:52
change the variable, in this case the
constant, that's holding the string value.
4:57
It only provides or it returns to you
a new string that's all lowercase letters.
5:03
We can prove this by seeing what's
inside the passphrase variable after
5:07
the method runs.
5:12
Notice how the variable
passphrase isn't changed.
5:18
Now let's look at
the toUpperCase() method,
5:24
which does the opposite of toLowerCase().
5:27
Change this to passphrase.toUpperCase().
5:30
As you can see in the console, all
letters are converted to uppercase, good.
5:41
Manipulating strings like this is a common
and important JavaScript task, and
5:46
it's frequently necessary when using
JavaScript for user input validation or
5:51
to deal with html text.
5:55
You'll learn more about manipulating
strings in a later video, where you'll use
5:57
your new-found string manipulation
knowledge to write a small program.
6:00