HTML5 data-* attribute type casting strings and numbers

Question

Why is the value of data-value="2.0" cast to a String and the value of data-value="2.5" cast to a Number? I can handle this fine within my function. I'm just trying to understand a little more about how Javascript handles Numbers and Strings. This kind of caught me off guard.

<a data-value="2.0">2.0</a> <a data-value="2.5">2.5</a> 

$("a").click(function() {     alert(typeof $(this).data( "value"));    }); 

[ Fiddle With It ]

Answer 1

Those values are simply strings to vanilla javascript; it's not attempting any conversion on its own.

[...document.querySelectorAll("a")].forEach(a =>      console.log("type: %s, value: %o",                   typeof a.dataset.value,                   a.dataset.value)  );

<a data-value="2.0">2.0</a>  <a data-value="2.5">2.5</a>

jQuery, on the other hand, tries to determine and convert to the appropriate type when accessing data attributes via data(). It's (arguably) an issue with their implementation. Their documentation (emphasis mine) actually addresses this:

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A value is only converted to a number if doing so doesn't change the value's representation. For example, "1E02" and "100.000" are equivalent as numbers (numeric value 100) but converting them would alter their representation so they are left as strings. The string value "100" is converted to the number 100.

_{See also HTMLElement.dataset}