Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Start a free Basic trial
to watch this video
Sometimes we need a number that exists as a String, not a literal Number. JavaScript provides a couple of methods that will extract a Number from a String.
Please note that newer browsers will return 12 for parseInt("012")
and not 10. This is because the default second parameter is now 10 for decimal instead of 8 for octal.
Always specify the base if you're parsing a string to maximize compatibility.
parseInt("012", 10); //For decimal parseInt("012", 8); //For octal

0:00
[? Music ?] [Treehouse]

0:08
In JavaScript, we can actually extract numbers out of strings

0:11
that have numeric characters in them.

0:13
Let's see how that works.

0:15
So far every time we've created a number,

0:17
we've used what we call a literal notation,

0:20
meaning that in our JavaScript code, our numbers are literally represented as code.

0:25
However, sometimes we may want to get numbers out of, perhaps, a string.

0:30
If we had a string with the value 197 in it,

0:36
this doesn't do us much good for, let's say, arithmetic operations.

0:40
We can't add other numbers to it because it's a string,

0:44
so how do we get a real number out of a string?

0:48
Well, one method we could do if we want a whole number

0:51
is to use a method called "parseInt,"

0:54
and this is a builtin function to JavaScript,

0:57
so the way we use it is to type in "parse," all lowercase, with a capital "I,"

1:01
"nt," and then we open up parentheses, placing the number inside.

1:08
Now, this is the easiest way to do this, and the "Int" stands for integer.

1:13
Remember earlier I was talking about the difference between integers and floats.

1:17
However, remember that numbers don't have this distinction

1:20
when they're represented in JavaScript.

1:22
However, there are 2 different functions, parseInt and parseFloat,

1:26
which will return you either a whole number

1:28
or the number with the included floating point precision.

1:32
This is just a convenience because usually you either want to

1:34
pull out a whole number or the whole floating point number out of a string.

1:39
Let's just focus on pulling a whole number or an integer out of a string.

1:43
If we take our j, I have "parseInt("197"),"

1:48
and we refresh our browser, type in "j," and we get 197, the number, not the string.

1:54
We could do "j + 2," and we get 199.

1:58
This is how we can get a number out of a string.

2:01
Now what would happen if our number was something like 012?

2:06
We saw what happened when this was a literal,

2:08
but let's see what happens in parseInt.

2:11
If we refresh, type in "j," we get the actual number 10.

2:16
Now, again, this may seem confusing because

2:19
we think it would be 12, but remember, the leading 0 represents it as an octal form.

2:24
Now what would happen if we type in "019?"

2:27
Well, it kind of depends. Let's check it out.

2:30
We get the number 1, so we get some strange behavior.

2:34
To solve this problem, if we know that our representation is a decimal representation,

2:38
we want to add a second argument to parseInt, which is the radix,

2:43
which is the base of the number system we want to parse.

2:48
Normally we want to parse the decimal,

2:50
so our second argument would be 10, meaning that our number

2:53
is base 10, so 019 should be the number 19.

2:59
If we refresh, type in "j," now we should see that it's the number 19.

3:05
Now, this is something that you'll learn after making this mistake

3:07
a lot of times in JavaScript.

3:09
Here's the lesson.

3:11
Any time you use parseInt to get a number out of a string,

3:15
you really want to add the second argument of 10

3:19
unless you're specifically working in a different base

3:21
because you may not know what the actual string representation of a number is

3:25
because it may be stored in a variable, or it may come from a user or another situation.

3:30
You don't know if it will have the weird properties, for instance, leading with a 0.

3:34
By adding the second argument of base 10,

3:37
you're assured that any time it parses an integer

3:40
it will always be done in base 10, and then the format of the actual

3:44
number in the string won't matter.

3:46
It won't change the base that it's parsed.

3:48
To make this even more confusing, if we just did parseInt 012,

3:53
in some implementations it will represent it as an octal,

3:57
and its sum a decimal.

3:59
Even though you can get away with not putting the second argument parseInt in,

4:03
you always want to because you're being very specific about

4:06
what type of number you're parsing out of your string,

4:09
so just always use ",10" when parsing an integer out of a string.

4:14
Now we could use parseInt and the radix operator to do some other interesting things.

4:21
For instance, if we wanted to parse binary out of it,

4:26
we could use the base 2 as a binary operator,

4:29
which means the only digits we could use in our string are 0 and 1,

4:34
and if you had a binary string of some sort, for instance, 0s and 1s,

4:37
and let's change this to k, and if we refresh and type in "k,"

4:42
we'll see that the 010111 representation in base 2 is the number 23.

4:49
So this radix argument is an arbitrary number,

4:53
so we could do 3, and that will change what k is.

4:57
Very rarely do you work in a base 3 number system,

5:00
but you can change it to 8 for octal and get the correct numbers.

5:06
But most of the time you're going to want your radix operator to be 10,

5:10
so what happens if we do parseInt with some nondigits in it?

5:17
Let's say we do 23 people,

5:21
and remember, any time we do a parseInt, you always want to add a radix here of 10.

5:26
If we refresh and take a look at l, we'll see it's 23.

5:30
It parsed it out pretty well, however, what if we did

5:33
"there are 23 people?"

5:38
And we refresh.

5:40
We get an interesting value called "NaN," and NaN stands for "not a number."

5:46
And this is a value that's used in JavaScript to represent a value

5:50
that is not a number.

5:52
Now NaN has some interesting properties.

5:54
If you, for instance, try to add a number to NaN,

5:57
so we'll take l, which is not a number,

5:59
and add 14 to it, we get not a number.

6:03
In fact, if we do any type of operation to not a number,

6:06
the result is always not a number.

6:09
If at any point in time you do an operation like parseInt

6:12
that could return not a number,

6:14
you want to check for it because any operations that you do after that

6:18
will result in those results being not a number all the way up.

6:22
You may see NaN show up in your JavaScripts when you don't expect it.

6:26
That means at some point, not a number showed up.

6:29
So how do we check for not a number?

6:34
We know l is going to be not a number,

6:37
so you might think we could do "=== NaN."

6:41
See, it highlights because not a number is something that we can use as a literal,

6:45
but what happens if we actually do this?

6:47
And we refresh.

6:49
We get false.

6:51
But we know l is NaN, and for some reason

6:55
if we compare the two of them, we get false.

6:59
Maybe it's because we're using our strict equality operator,

7:03
but what if we just try 2 equals?

7:05
Well, we get false again,

7:07
and that's because not a number has a curious property

7:10
of not being equal to itself,

7:12
so we can see that even comparing

7:18
the JavaScript variable l to itself returns false.

7:22
You may be tempted to use that to detect not a number,

7:25
but what you want to do is use a function that's built into JavaScript called isNaN.

7:31
The way we do that is type in "isNaN."

7:37
And this takes a parameter, and if we pass an l, which is not a number,

7:41
we'll see it's true, so NaN is a very weird value

7:45
because it doesn't equal itself or any other number

7:48
and has a special function for testing if it is itself.

7:56
And the last function I want to talk about here is called parseFloat,

7:58
and it acts very similar to parseInt,

8:02
and we'll say "parseFloat("123.456")."

8:12
And now the number m will be 123.456,

8:18
and this has the same properties, so if we have stuff after the number,

8:23
like "is a strange number,"

8:28
we can see that m still works.

8:30
However, if we lead with some other stuff, "this number,"

8:38
we'll see that, again, parseFloat returns not a number.

8:42
For parseInt and for parseFloat to work, it must start with a number,

8:46
and then anything after the number really won't affect it

8:48
so long as your string starts with something that could be parsed as a number.

8:53
With parseFloat, we don't have to add the second argument of our radix

8:56
because parseFloat will work in base 10

8:59
really no matter what, so if we did this and checked our value of m,

9:04
we still get 123.456.

9:07
So parseInt and parseFloat are the 2 functions you would use

9:10
to get a number out of a string.

9:13
So now we've seen the different ways we can create numbers

9:15
or even parse them out of a string.

9:17
Up next, we'll look at the mathematical operators we can use

9:19
on our numbers.

9:21
[? Music ?] [Treehouse]
You need to sign up for Treehouse in order to download course files.
Sign up