Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
You may be familiar with methods like toUpperCase and toLowerCase that change strings. When working with user input we'll often need to edit data and change the format of given strings. String modification methods allow us to do things like break strings into smaller parts called substrings. You can also use methods to remove whitespace or combine different strings together.
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
Along with methods you've learned for
searching strings,
0:00
JavaScript provides methods for
altering their values.
0:03
These include methods for separating,
combining, converting, and
0:07
removing characters from strings.
0:10
First, let's look at how we can clean up
strings by removing unintentional and
0:14
unnecessary characters.
0:19
When typing, it can be easy to add
accidental whitespaces by pressing space
0:21
before or after entering text.
0:25
Imagine your programming a fill
in the blank, true or false quiz.
0:29
A user may answer false, followed by
a space when the answer is false,
0:33
and be marked wrong for this.
0:38
The trim method removes all white
spaces around the string, but
0:40
doesn't affect whitespace
between characters in a string.
0:44
In the workspace,
make sure your index.html file is linked
0:49
to modify.js by updating your script tag.
0:53
In modify.js,
0:58
we have a string named answer with the
value of false followed by an extra space.
1:00
Now back in the console,
we can run trim on this value.
1:08
And when we return the answer,
the whitespace should be gone.
1:12
There we have it.
1:22
In some cases, we may only want to
access part of a string or substring.
1:24
We can use a method with the name
substring to return a substring,
1:30
starting at our chosen index value.
1:34
Substring takes an index to start at,
and an optional end value.
1:38
The substring will contain all values up
until and not including the end value.
1:44
We'll try this out on the fact
string in modify.js.
1:51
Back in the browser we'll
run substring on fact
1:56
We'll pass 0 and 4 as arguments.
2:05
And we see the string HTML printed out.
2:10
There's another nearly identical method
for returning substrings called slice.
2:14
Slice takes the same arguments, but
has slightly different behavior.
2:19
When a start value is
higher than an end value,
2:24
substrings swaps the values,
while slice returns an empty string.
2:26
What if we wanted to
replace part of a string?
2:32
The replace method accepts two parameters.
2:35
A string to search for and
a string to replace it with.
2:38
In our fact string,
let's replace HTML with CSS.
2:43
We'll use the format we're
getting familiar with.
2:51
Variable name, followed by a dot and
then the method name.
2:54
We'll pass in the parameters, first HTML
to search for then CSS to replace it with.
2:59
Our sentence is returned,
CSS is a programming language.
3:07
The replace method looks for
3:13
the first occurrence of a substring
in our string and replaces it.
3:15
If we wanted to replace with
all occurrences of a string,
3:19
we'd use the replace all method.
3:22
While strings do provide many methods,
3:26
they do have limitations when
compared to other data types.
3:28
Strings don't have access to the same
iteration methods as arrays, and
3:32
we can't do mathematical
operations on them like numbers.
3:36
Luckily, if we need to,
3:41
strings have methods that allow
changing them into both of these types.
3:42
One useful method is the split method,
3:49
which allows us to break
a string into an array.
3:51
Imagine we are writing JavaScript for
a guessing game that displays letters
3:55
of a hidden phrase on the screen
in their own div elements.
3:59
In situations like this,
we can use the split method.
4:02
Transforming a string to an array allows
us to iterate over each of the values and
4:06
operate on them as we'd like.
4:10
The split method takes an optional
separator and a limit.
4:13
The separator tells the method
where to split the string apart.
4:17
The limit tells us how many substrings
to include in the returned array.
4:21
We can separate a sentence string
into words by writing split and
4:27
passing it a single space as a separator.
4:31
I've stored part of one of my
favorite quotes in a variable named
4:34
paleBlueDot in modify.js.
4:38
Let's run split on this variable,
4:41
passing the string with
a single space as an argument.
4:43
And again, we'll clear up the console.
4:50
Type paleBlueDot followed by split.
5:00
With that empty space.
5:04
It gives us an array of substrings
that make up the original string.
5:08
If you need to convert
the array back into a string,
5:13
you can use the array join method.
5:16
The join method takes an array and
combines it to form a string.
5:19
Like split, it also takes a separator, but
places its separator between characters.
5:25
I've added a link to the teachers note so
you can learn more about join.
5:31
Lastly, there are times when
a user will enter a string, but
5:36
you'll need to store that value as a number
for which we can use the parseInt method.
5:40
If we add a program that asks the user
their age, and added 1 to print out their
5:46
age on their next birthday,
using only strings wouldn't work.
5:51
If the user entered 20,
and the program added 1,
5:56
we'd get the output 201
instead of 21 as expected.
6:01
ParseInt takes a string and
returns a number value,
6:09
we can create a variable x and
set its value equal to a string 20.
6:13
Now when we run parseInt on x and add 1,
6:24
the addition works as expected.
6:29
We can go from numbers back to
strings using the to string method.
6:35
In the next video,
6:40
we'll practice using some of the methods
we've just learned together.
6:41
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