JavaScript provides two methods for converting non-number primitives into numbers: parseInt() and parseFloat() . As you may have guessed, the former converts a value into an integer whereas the latter converts a value into a floating-point number.

Any number literal contained in a string is also converted correctly, so the string "0xA" is properly converted into the number 10. However, the string "22.5" will be converted to 22 , because the decimal point is an invalid character for an integer. Some examples:

var iNum1 = parseInt("1234blue"); //returns 1234

var iNum2 = parseInt("0xA"); //returns 10

var iNum3 = parseInt("22.5"); //returns 22

var iNum4 = parseInt("blue"); //returns NaN

The parseInt() method also has a radix mode, allowing you to convert strings in binary, octal, hexadecimal, or any other base into an integer. The radix is specified as a second argument to parseInt() , so a call to parse a hexadecimal value looks like this:

var iNum1 = parseInt("AF", 16); //returns 175

Of course, this can also be done for binary, octal, and even decimal (which is the default mode):

var iNum1 = parseInt("10", 2); //returns 2

var iNum2 = parseInt("10", 8); //returns 8

var iNum2 = parseInt("10", 10); //returns 10

If decimal numbers contain a leading zero, it’s always best to specify the radix as 10 so that you won’t accidentally end up with an octal value. For example:

var iNum1 = parseInt("010"); //returns 8

var iNum2 = parseInt("010", 8); //returns 8

var iNum3 = parseInt("010", 10); //returns 10

In this code, both lines are parsing the string "010" into a number. The first line thinks that the string is an octal value and parses it the same way as the second line (which specifies the radix as 8). The last line specifies a radix of 10, so iNum3 ends up equal to 10.

Another difference when using parseFloat() is that the string must represent a floating-point number in decimal form, not octal or hexadecimal. This method ignores leading zeros, so the octal number 0908 will be parsed into 908 , and the hexadecimal number 0xA will return NaN because x isn’t a valid character for a floating-point number. There is also no radix mode for parseFloat() .

Some examples of using parseFloat() :

var fNum1 = parseFloat("1234blue"); //returns 1234

var fNum2 = parseFloat("0xA"); //returns 0

var fNum3 = parseFloat("22.5"); //returns 22.5

var fNum4 = parseFloat("22.34.5"); //returns 22.34

var fNum5 = parseFloat("0908"); //returns 908

var fNum6 = parseFloat("blue"); //returns NaN

Read More, Read More

Similar Question Read more here

The internal workings are not that different, as @James Allardic already answered. There is a difference though. Using parseFloat, a (trimmed) string starting with one or more numeric characters followed by alphanumeric characters can convert to a Number, with Number that will not succeed. As in:

parseFloat('3.23abc'); //=> 3.23
Number('3.23abc'); //=> NaN

In both conversions, the input string is trimmed, by the way:

parseFloat('  3.23abc '); //=> 3.23
Number('   3.23 '); //=> 3.23

parseInt("1.0") will be same as parseInt("1.1") parseFloat("1.0") will be different to parseFloat("1.1")

The difference between parseFloat and Number

parseFloat/parseInt is for parsing a string, while Number/+ is for coercing a value to a number. They behave differently. But first let's look at where they behave the same:

CopyparseFloat('3'); // => 3
Number('3'); // => 3
parseFloat('1.501'); // => 1.501
Number('1.501'); // => 1.501
parseFloat('1e10'); // => 10000000000
Number('1e10'); // => 10000000000

So as long as you have standard numeric input, there's no difference. However, if your input starts with a number and then contains other characters, parseFloat truncates the number out of the string, while Number gives NaN (not a number):

CopyparseFloat('1x'); // => 1
Number('1x'); // => NaN

In addition, Number understands hexadecimal input while parseFloat does not:

CopyparseFloat('0x10'); // => 0
Number('0x10'); // => 16

But Number acts weird with empty strings or strings containing only white space:

CopyparseFloat(''); // => NaN
Number(''); // => 0
parseFloat(' \r\n\t'); // => NaN
Number(' \r\n\t'); // => 0

On the whole, I find Number to be more reasonable, so I almost always use Number personally (and you'll find that a lot of the internal JavaScript functions use Number as well). If someone types '1x' I prefer to show an error rather than treat it as if they had typed '1'. The only time I really make an exception is when I am converting a style to a number, in which case parseFloat is helpful because styles come in a form like '3px', in which case I want to drop the 'px' part and just get the 3, so I find parseFloat helpful here. But really which one you choose is up to you and which forms of input you want to accept.

Note that using the unary + operator is exactly the same as using Number as a function:

CopyNumber('0x10'); // => 16
+'0x10'; // => 16
Number('10x'); // => NaN
+'10x'; // => NaN
Number('40'); // => 40
+'40'; // => 40

So I usually just use + for short. As long as you know what it does, I find it easy to read.

• Number.parseInt method (or just parseInt)

  • Ignores leading and trailing whitespace
  • Parses a leading number to an integer (not a floating point number)
  • Ignores invalid trailing data
  • Lets you set the base to use when interpreting the number
  • Will interpret text starting with 0x as hexadecimal, if another base was not provided
  • Returns NaN if the value could not be successfully parsed to an integer

• Number.parseFloat method (or just parseFloat)

  • Similar to parseInt, except that it allows for a decimal part to be interpreted
  • Only parses to base-10

• Number() function (or class?)

  • Similar to parseFloat, but does not allow trailing text
  • Will return 0 for an empty string or a string that only contains whitespace
  • It's not a class; when called without new, it returns a primitive number

• the + operator

  • Basically the same as Number(), but in operator form.

• eval()

  • Interprets and executes the given input as a JavaScript program.
  • Given the string "2", it will be interpreted as a numeric literal, and return that value since it's the result of the last expression in the program
  • Throws an error if the input was not a valid program.

• JSON.parse()

  • Parses the textual data as JSON-serialized data.
  • If the data is valid, it creates the JavaScript objects/primitives that are represented by the data, and returns them.
  • If the data is invalid, it throws an error.
  • Given the string "2", it will be interpreted as a numeric literal, and return the value that was successfully parsed out of it according to the parsing requirements of JSON.

So you decide which is appropriate to use based on their capabilities.

Well, they are semantically different, the Number constructor called as a function performs type conversion and parseInt performs parsing, e.g.:

// parsing:
parseInt("20px");       // 20
parseInt("10100", 2);   // 20
parseInt("2e1");        // 2

// type conversion
Number("20px");       // NaN
Number("2e1");        // 20, exponential notation

Also parseInt will ignore trailing characters that don't correspond with any digit of the currently used base.

The Number constructor doesn't detect implicit octals, but can detect the explicit octal notation:

Number("010");         // 10
Number("0o10")         // 8, explicit octal

parseInt("010");       // 8, implicit octal
parseInt("010", 10);   // 10, decimal radix used

And it can handle numbers in hexadecimal notation, just like parseInt:

Number("0xF");   // 15
parseInt("0xF"); //15

In addition, a widely used construct to perform Numeric type conversion, is the Unary + Operator (p. 72), it is equivalent to using the Number constructor as a function:

+"2e1";   // 20
+"0xF";   // 15
+"010";   // 10