Preview
Video Player
00:00
00:00
Convert Strings to Numbers
6:52Learn how to convert a string to a number in JavaScript, using parseFloat(), parseInt(), and the unary plus (+) operator.
Earlier you learned about the unexpected
behavior caused by treating strings like
0:00
numeric values.
0:05
And that if you're dealing with input
that is supposed to be a number,
0:06
it's best to convert strings that contain
numeric characters into real numbers or
0:10
numeric data types.
0:14
JavaScript provides a few ways
to convert strings to numbers.
0:16
One way is with the parseInt method,
which converts a string to an integer.
0:20
An integer is a whole number without a
decimal point, like 1, 5, or negative 233.
0:26
You provide the parseInt method a string
and it returns an integer value.
0:31
This is a good way to solve
the problem with my program.
0:36
So first, I'll test it in the console
0:39
with typeof parseInt, HTMLBadges and
0:44
typeof parseInt CSSBadges.
0:50
Notice how this time,
typeof HTMLBadges returns number and
0:59
typeof CSS badges also returns number.
1:03
Good.
1:05
So now I'll change the value of
the total badges variable to
1:06
parseInt HTMLBadges,
plus parseInt CSSBadges.
1:13
Let's see how this works now.
1:20
I'll enter 10 HTML badges,
and 5 CSS badges.
1:24
Great, and now I get 15 total badges.
1:29
There's a similar method for
numbers that have decimal points.
1:33
It's called parseFloat.
1:36
It also gets a string value and
returns a floating point value.
1:37
Let me comment out these three lines so
that they don't run in the browser.
1:42
Now I'll declare a new
variable named pi and
1:46
log it to the console.
1:52
The quote marks around 3.14 means that
the value stored in pi is a string.
1:55
For example, adding the type of
operator in front of pi returns string.
2:01
This time,
I'll use the parseFloat method and
2:10
provide it the string value stored in pi.
2:14
Checking the console,
notice how type of pi returns number.
2:18
That means it's a number now.
2:22
As you can see, the typeof operator is
really handy and developers use it all
2:24
the time to check a variable's type and
ensure that it's the correct data type.
2:29
You can even use the parseInt and
2:34
parseFloat methods on numbers that include
letters and non numeric characters.
2:36
For example, I'll pass parseFloat
the string 1.89 light years away.
2:41
If your string starts with a number
followed by other characters,
2:50
parseFloat returns the number only.
2:54
Notice how it returns just the number part
at the very beginning of the string, 1.89.
2:57
However, if the string begins with
letters, you get a strange value.
3:02
This time, I'll use parseInt,
3:07
and pass it the string, that is so 2008.
3:10
And the console, we see NaN.
3:15
NaN stands for not a number.
3:19
And it's JavaScript's way of saying
that it can't find a number,
3:22
at least at the beginning of the string.
3:25
NaN usually represents an error,
for example,
3:27
a result of an incorrect
mathematical operation.
3:30
You'll get a variety of different
return values from the parseInt and
3:33
parseFloat methods.
3:37
For example, if you provide the parseInt
method a string that's a decimal
3:39
number like 202.99,
you only get the 202 part back,
3:44
because parseInt only returns
a whole number or an integer.
3:50
You can see more examples of parseInt and
3:54
parseFloat return values in
the teacher's notes with this video.
3:57
There are other ways to convert
a string to a number in JavaScript.
4:01
For example, in a previous course,
you learned to use the unary plus
4:04
operator as a quick way of
converting a string to a number.
4:08
You place a plus symbol just
before the variable name or
4:11
string that you wanna convert.
4:14
Back in my JavaScript file,
I'll uncomment these three statements.
4:16
And change the value of the totalBadges
variable to plus HTMLBadges,
4:20
followed by the addition operator,
then, plus CSSBadges.
4:27
And console.log, totalBadges.
4:34
The unary plus operator attempts to
convert the value to a number if it isn't
4:41
already.
4:46
Back in the browser,
when I enter 10 HTML badges and
4:48
15 CSS badges,
the console prints 25 total badges.
4:52
Keep in mind that the unary plus
operator works with both integers and
4:57
floating point numbers.
5:01
Let's try placing the plus just before
5:03
the pi variable with typeof plus pi.
5:09
The console lets me know
that pi is now a number.
5:14
Because the syntax is so brief, the unary
plus is becoming one of the fastest and
5:18
preferred ways of converting
a string into a number.
5:23
However, many developers often prefer
code readability over brevity.
5:26
So it's still really common
to use the parseInt and
5:31
parseFloat methods, because they
clearly explain their purpose.
5:34
The approach you use is up to you.
5:38
Also, parseInt, parseFloat, and the unary
plus operator can help you when making
5:40
making comparisons and
working with conditional statements.
5:45
For example,
within console.log, I'll write
5:48
the comparison pi is
strictly equal to 3.14.
5:53
And I'll display a prompt
6:00
dialogue that asks, what is pi?
6:04
Remember, if you compare a number
value with a string using the triple
6:09
equal sign or strict equality operator,
it will always evaluate to false,
6:15
because you're comparing
a number with a string.
6:20
In this case, converting the string
stored in pi to a number returns true.
6:28
Since you'll work with strings frequently,
especially when collecting input from
6:36
a user, you will need to be careful when
dealing with strings that contain numbers.
6:40
Remember, to do math using input values,
always convert the string to an integer or
6:45
float using the methods you just learned.
6:49