1
00:00:00,320 --> 00:00:03,366
Along with methods you've learned for
searching strings,

2
00:00:03,366 --> 00:00:06,300
JavaScript provides methods for
altering their values.

3
00:00:07,450 --> 00:00:10,971
These include methods for separating,
combining, converting, and

4
00:00:10,971 --> 00:00:12,800
removing characters from strings.

5
00:00:14,250 --> 00:00:19,052
First, let's look at how we can clean up
strings by removing unintentional and

6
00:00:19,052 --> 00:00:21,530
unnecessary characters.

7
00:00:21,530 --> 00:00:25,925
When typing, it can be easy to add
accidental whitespaces by pressing space

8
00:00:25,925 --> 00:00:27,790
before or after entering text.

9
00:00:29,260 --> 00:00:33,690
Imagine your programming a fill
in the blank, true or false quiz.

10
00:00:33,690 --> 00:00:38,798
A user may answer false, followed by
a space when the answer is false,

11
00:00:38,798 --> 00:00:40,975
and be marked wrong for this.

12
00:00:40,975 --> 00:00:44,431
The trim method removes all white
spaces around the string, but

13
00:00:44,431 --> 00:00:47,760
doesn't affect whitespace
between characters in a string.

14
00:00:49,150 --> 00:00:53,982
In the workspace,
make sure your index.html file is linked

15
00:00:53,982 --> 00:00:57,500
to modify.js by updating your script tag.

16
00:00:58,940 --> 00:01:00,042
In modify.js,

17
00:01:00,042 --> 00:01:05,326
we have a string named answer with the
value of false followed by an extra space.

18
00:01:08,421 --> 00:01:12,000
Now back in the console,
we can run trim on this value.

19
00:01:12,000 --> 00:01:14,991
And when we return the answer,
the whitespace should be gone.

20
00:01:22,837 --> 00:01:23,510
There we have it.

21
00:01:24,530 --> 00:01:28,870
In some cases, we may only want to
access part of a string or substring.

22
00:01:30,100 --> 00:01:34,816
We can use a method with the name
substring to return a substring,

23
00:01:34,816 --> 00:01:37,490
starting at our chosen index value.

24
00:01:38,710 --> 00:01:42,930
Substring takes an index to start at,
and an optional end value.

25
00:01:44,290 --> 00:01:49,200
The substring will contain all values up
until and not including the end value.

26
00:01:51,440 --> 00:01:54,480
We'll try this out on the fact
string in modify.js.

27
00:01:56,510 --> 00:01:59,981
Back in the browser we'll
run substring on fact

28
00:02:05,215 --> 00:02:08,667
We'll pass 0 and 4 as arguments.

29
00:02:10,734 --> 00:02:14,455
And we see the string HTML printed out.

30
00:02:14,455 --> 00:02:19,185
There's another nearly identical method
for returning substrings called slice.

31
00:02:19,185 --> 00:02:24,190
Slice takes the same arguments, but
has slightly different behavior.

32
00:02:24,190 --> 00:02:26,828
When a start value is
higher than an end value,

33
00:02:26,828 --> 00:02:31,090
substrings swaps the values,
while slice returns an empty string.

34
00:02:32,510 --> 00:02:35,320
What if we wanted to
replace part of a string?

35
00:02:35,320 --> 00:02:38,470
The replace method accepts two parameters.

36
00:02:38,470 --> 00:02:41,680
A string to search for and
a string to replace it with.

37
00:02:43,200 --> 00:02:48,540
In our fact string,
let's replace HTML with CSS.

38
00:02:51,325 --> 00:02:54,230
We'll use the format we're
getting familiar with.

39
00:02:54,230 --> 00:02:58,300
Variable name, followed by a dot and
then the method name.

40
00:02:59,870 --> 00:03:06,702
We'll pass in the parameters, first HTML
to search for then CSS to replace it with.

41
00:03:07,968 --> 00:03:11,590
Our sentence is returned,
CSS is a programming language.

42
00:03:13,290 --> 00:03:15,082
The replace method looks for

43
00:03:15,082 --> 00:03:19,268
the first occurrence of a substring
in our string and replaces it.

44
00:03:19,268 --> 00:03:22,968
If we wanted to replace with
all occurrences of a string,

45
00:03:22,968 --> 00:03:25,120
we'd use the replace all method.

46
00:03:26,220 --> 00:03:28,389
While strings do provide many methods,

47
00:03:28,389 --> 00:03:31,650
they do have limitations when
compared to other data types.

48
00:03:32,660 --> 00:03:36,703
Strings don't have access to the same
iteration methods as arrays, and

49
00:03:36,703 --> 00:03:40,090
we can't do mathematical
operations on them like numbers.

50
00:03:41,490 --> 00:03:42,982
Luckily, if we need to,

51
00:03:42,982 --> 00:03:47,330
strings have methods that allow
changing them into both of these types.

52
00:03:49,040 --> 00:03:51,293
One useful method is the split method,

53
00:03:51,293 --> 00:03:54,030
which allows us to break
a string into an array.

54
00:03:55,170 --> 00:03:59,145
Imagine we are writing JavaScript for
a guessing game that displays letters

55
00:03:59,145 --> 00:04:02,940
of a hidden phrase on the screen
in their own div elements.

56
00:04:02,940 --> 00:04:06,210
In situations like this,
we can use the split method.

57
00:04:06,210 --> 00:04:10,901
Transforming a string to an array allows
us to iterate over each of the values and

58
00:04:10,901 --> 00:04:13,490
operate on them as we'd like.

59
00:04:13,490 --> 00:04:17,440
The split method takes an optional
separator and a limit.

60
00:04:17,440 --> 00:04:21,220
The separator tells the method
where to split the string apart.

61
00:04:21,220 --> 00:04:25,600
The limit tells us how many substrings
to include in the returned array.

62
00:04:27,110 --> 00:04:31,070
We can separate a sentence string
into words by writing split and

63
00:04:31,070 --> 00:04:34,620
passing it a single space as a separator.

64
00:04:34,620 --> 00:04:38,378
I've stored part of one of my
favorite quotes in a variable named

65
00:04:38,378 --> 00:04:40,130
paleBlueDot in modify.js.

66
00:04:41,620 --> 00:04:43,830
Let's run split on this variable,

67
00:04:43,830 --> 00:04:47,225
passing the string with
a single space as an argument.

68
00:04:50,313 --> 00:04:52,646
And again, we'll clear up the console.

69
00:05:00,822 --> 00:05:03,307
Type paleBlueDot followed by split.

70
00:05:04,961 --> 00:05:06,950
With that empty space.

71
00:05:08,642 --> 00:05:12,330
It gives us an array of substrings
that make up the original string.

72
00:05:13,370 --> 00:05:16,469
If you need to convert
the array back into a string,

73
00:05:16,469 --> 00:05:19,520
you can use the array join method.

74
00:05:19,520 --> 00:05:23,660
The join method takes an array and
combines it to form a string.

75
00:05:25,150 --> 00:05:31,950
Like split, it also takes a separator, but
places its separator between characters.

76
00:05:31,950 --> 00:05:34,980
I've added a link to the teachers note so
you can learn more about join.

77
00:05:36,790 --> 00:05:40,525
Lastly, there are times when
a user will enter a string, but

78
00:05:40,525 --> 00:05:45,520
you'll need to store that value as a number
for which we can use the parseInt method.

79
00:05:46,680 --> 00:05:51,193
If we add a program that asks the user
their age, and added 1 to print out their

80
00:05:51,193 --> 00:05:55,030
age on their next birthday,
using only strings wouldn't work.

81
00:05:56,430 --> 00:06:01,390
If the user entered 20,
and the program added 1,

82
00:06:01,390 --> 00:06:06,815
we'd get the output 201
instead of 21 as expected.

83
00:06:09,068 --> 00:06:13,655
ParseInt takes a string and
returns a number value,

84
00:06:13,655 --> 00:06:19,398
we can create a variable x and
set its value equal to a string 20.

85
00:06:24,822 --> 00:06:29,582
Now when we run parseInt on x and add 1,

86
00:06:29,582 --> 00:06:33,630
the addition works as expected.

87
00:06:35,530 --> 00:06:40,210
We can go from numbers back to
strings using the to string method.

88
00:06:40,210 --> 00:06:41,069
In the next video,

89
00:06:41,069 --> 00:06:44,410
we'll practice using some of the methods
we've just learned together.