Matt Matt - 1 year ago 50
Javascript Question

HTML5 data-* attribute type casting strings and numbers

Why is the value of

cast to a String and the value of
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 Source

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

[]"a"), function(a){
    console.log("type: %s, value: %o", 
                typeof a.dataset.value, 
// type: string, value: "2.0"
// type: string, value: "2.5" 
<!-- console visualization; see -->
<script src=""></script>
<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