parseFloat addition in Javascript, help me understand how it works - javascript

i'm following Beginning Javascript, and learning about data types conversions, more specific float and integers.
in chrome console, when i try subtraction:
parseFloat("2.1" - "0.1");
=>2
but when try the same with addition i get this:
parseFloat("2.1" + "0.1");
=>2.1
Can someone elaborate why during addition it behaves not how I would think it should?
thanks in advance

Have a look at the results of the subtraction and addition before calling parseFloat:
"2.1" - "0.1"
=> 2
In this case, JavaScript has inferred that you want to subtract numbers, so the strings have been parsed for you before the subtraction operation has been applied. Let's have a look at the other case:
"2.1" + "0.1"
=> "2.10.1"
Here the plus operator is ambiguous. Did you want to convert the strings to numbers and add them, or did you want to concatenate the strings? Remember that "AB" + "CDE" === "ABCDE". You then have:
parseFloat("2.10.1")
Now, 2.10.1 is not a valid number, but the parsing does its best and returns 2.10 (or put more simply, 2.1).
I think what you really wanted to do is to parse the two numbers separately before adding or subtracting them. That way you don't rely on JavaScript's automatic conversion from strings to numbers, and any mathematical operation should work as you expect:
parseFloat("2.1") - parseFloat("0.1")
=> 2
parseFloat("2.1") + parseFloat("0.1")
=> 2.2

Related

Add trailing zeros to an integer without converting to string in JS?

I'm looking to add decimals to the end of my integer. As an example:
15 => 15.00
The problem with methods like toFixed is that it will convert it into a string. I've tried to use parseFloat() and Number() on the string, but it'll convert it back to an integer with no decimals.
Is this possible? If not, can someone explain to me the logic behind why this isn't possible?
EDIT: Welp the intent was to display the number as a number, but from the going consensus, it looks like the way the only way to go about it is to use a string. Found an answer on the why: https://stackoverflow.com/a/17811916/8869701
The problem you are finding is that all numbers in javascript are floats.
a = 0.1
typeof a # "number"
b = 1
typeof b # number
They are the same.
So there is no real way to convert to from an integer to a float.
This is the reason that all of the parseFloat etc are string methods for reading and writing numbers from strings. Even if you did have floats and integers, specifying the precision of a number only really makes sense when you are displaying it to a user, and for this purpose it will be converted to a string anyway.
Depending on your exact use case you will need to use strings if you want to display with a defined precision.
When working with numbers 15 and 15.00 are equal. It wouldn't make any sense to use memory to store those trailing or leading zeros.
If that information is needed it is usually for displaying purposes. In that case a string is the right choice.
In case you need that value again you can parse the string as a number.

Force decimal value, even on integers, in Javascript

I need to take a user-input value and force it to 6 decimal places, even if the value is an integer. For example, the user types in 12, I need to convert that to 12.000000, as a number. This is not for display purposes - the system on the other end of my app requires decimal values, and there's nothing I can do about that.
As I've read elsewhere, numbers in Javascript are all 64-bit floating point numbers, so it doesn't seem like this should be so difficult.
Alas, toFixed is not an option here because that gives me a string value '12.000000'. Every other trick I've tried just yields the integer 12 with no decimal zeroes (e.g. wrapping toFixed with Number, dividing the string value by 1, and other such silliness).
Is it possible to represent an integer as a float in Javascript, without ending up with a string value?
UPDATE
Thanks for all the comments and answers. Unfortunately for me, #Enzey's comment actually answers my core question when he said that forcing precision can only be done with a string. If he submits that as an answer I'll accept it. I kept the details of my implementation purposefully vague because I didn't want to get into why I wanted to do what I'm doing, I just wanted to know if it was possible. But I guess I just ended up confusing people. Sorry about that.
Alas, there is no such thing as float or int in JavaScript. You only have Number, which does not have the slightest clue about a difference between 12 and 12.000000.
If you're sending it as a stringified JSON, you can use .toFixed on the number, and then strip the " signs from the numbers in the stringified JSON:
var result = JSON.stringify({
number: (12).toFixed(6)
})
.replace(/"[\d]+\.\d{6}"/g, function(v) {
return v.replace(/"/g, '');
});
console.log(result);

Why +str is a better than str*1 in JS to convert string to number?

Say I have a string, which value is already a number, e.g. var str = "1234" Now I want to convert it to number.
I have seen two tricks on the internet so far,
Use the unary +: var num = +str
Use the multiply operator *: var num = str*1
I want to know which one is better in general.
As I saw from the comment of the accepted answer here: Converting Json Results to a Date, it seems like *1 is best to be avoided. Is this true and what is the reason behind it?
Fewer operations, basically.
The unary plus calls the internal toNumber method, whereas the multiplication operator calls toNumber as well, then does a math operation on it.
Why do the extra steps?
http://www.ecma-international.org/ecma-262/6.0/#sec-unary-plus-operator
http://www.ecma-international.org/ecma-262/6.0/#sec-applying-the-mul-operator

+ operator vs parseFloat

Example 1 of the knockout extenders page describes a way of rounding user input and making sure it is only numeric.
It works great, but looking through the source they do a peculiar thing that i don't understand, that is on line 8 they do this:
parseFloat(+newValue)
newValue is a string.
When i initially asked this question I didn't know what + did - some further poking and a link to a different MDN page from one of the initial answers I got indicate it is a unary operator equivalent to number(str) and that there are some differences between +str and parseFloat(str) (treatment of strings ending in alpha characters and interpretation of hex seem to be the headlines).
I still don't understand why the + in this case needed to be wrapped in the parseFloat although I am starting to think it might be a typo...
Citing MDN docs for parseFloat:
parseFloat parses its argument, a string, and returns a floating point number. If it encounters a character other than a sign (+ or -), numeral (0-9), a decimal point, or an exponent, it returns the value up to that point and ignores that character and all succeeding characters. Leading and trailing spaces are allowed.
Using [unary plus operator][2] you may be sure that `parseFloat` operates on `Number`, which is only useful if you want to be more strict about results but still want to use a `parseFloat`
parseFloat('0.32abcd') // -> 0.32
parseFloat(+'0.32abcd') // -> NaN
**Update:**
After a bit of digging in docs and running some tests, seems there is no reason to use parseFloat other than parsing strings that may contain numbers with non numeric trails to number, eq:
parseFloat('31.5 miles') // -> 31.5
parseFloat('12.75em') // -> 12.75
For any other cases where your string contains number + is a fastest and prefered way (citing MDN docs for unary plus operator):
unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number.
See parseFloat versus unary test case for how faster it is.
Previous link broken so here is the new test that shows how unary is faster.

JSON.parse parses / converts big numbers incorrectly

My problem is really simple but I'm not sure if there's a "native" solution using JSON.parse.
I receive this string from an API :
{ "key" : -922271061845347495 }
When I'm using JSON.parse on this string, it turns into this object:
{ "key" : -922271061845347500 }
As you can see, the parsing stops when the number is too long (you can check this behavior here). It has only 15 exact digits, the last one is rounded and those after are set to 0. Is there a "native" solution to keep the exact value ? (it's an ID so I can't round it)
I know I can use regex to solve this problem but I'd prefer to use a "native" method if it exists.
Your assumption that the parsing stops after certain digits is incorrect.
It says here:
In JavaScript all numbers are floating-point numbers. JavaScript uses
the standard 8 byte IEEE floating-point numeric format, which means
the range is from:
±1.7976931348623157 x 10308 - very large, and ±5 x 10-324 - very small.
As JavaScript uses floating-point numbers the accuracy is only assured
for integers between: -9007199254740992 (-253) and 9007199254740992
(253)
You number lies outside the "accurate" range hence it is converted to the nearest representation of the JavaScript number. Any attempt to evaluate this number (using JSON.parse, eval, parseInt) will cause data loss. I therefore recommend that you pass the key as a string. If you do not control the API, file a feature request.
The number is too big to be parsed correctly.
One solution is:
Preprocessing your string from API to convert it into string before parsing.
Preform normal parsing
Optionally, you could convert it back into number for your own purpose.
Here is the RegExp to convert all numbers in your string (proceeded with :) into strings:
// convert all number fields into strings to maintain precision
// : 922271061845347495, => : "922271061845347495",
stringFromApi = stringFromApi.replace(/:\s*(-?\d+),/g, ': "$1",');
Regex explanation:
\s* any number of spaces
-? one or zero '-' symbols (negative number support)
\d+ one or more digits
(...) will be put in the $1 variable

Categories