HTML5 data- * tipo di attributo stringhe e numeri di fusione

Question

Perché il cast di data-value="2.0" è convertito in una stringa e il valore di data-value="2.5" viene convertito in numero? Posso gestire questa multa nella mia funzione. Sto solo cercando di capire un po 'di più su come Javascript gestisce numeri e stringhe. Questo mi ha colto alla sprovvista.

<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

Questi valori sono semplicemente stringhe di vaniglia javascript; non sta tentando alcuna conversione da solo.

[...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, invece, cerca di determinare e convertire il tipo appropriato quando si accede agli attributi tramite data(). È (discutibilmente) un problema con la loro implementazione. La loro documentation (sottolineatura mia) in realtà affronta questo:

Ogni tentativo è fatto per convertire la stringa in un valore JavaScript (questo include booleani, numeri, oggetti, array e null). Un valore viene convertito in un numero solo se così facendo non cambia la rappresentazione del valore. Ad esempio, "1E02" e "100.000" sono equivalenti come numeri (valore numerico 100) ma la loro conversione altererebbe la loro rappresentazione in modo da essere lasciati come stringhe. Il valore stringa "100" è convertito al numero 100.

_{Vedi anche HTMLElement. dataset}

Answer 2

Sembra essere trattare tale estensione" .0" del numero come una stringa.

Se tutti i valori dei dati stanno per essere in arrivo in quel formato, solo frustare un parseFloat() su quelle ventose come questo:

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

In questo modo non importa se sono stringhe o numeri , saranno sempre trattati come numeri (decimali intatti).

Answer 3

Come menzionato da tymeJV, questo sembra un problema con il modo in cui jquery gestisce l'autoconversione. Se si usa "2", si dà anche un numero, quindi suppongo che sia solo un caso strano in cui gestiscono le cose. Incoraggerei semplicemente usando .attr ('xxx') e analizzando i tuoi dati al suo tipo noto.

Answer 4

Penso che sia più una domanda su come jquery identifica i numeri. Se usi alert(typeof(this.getAttribute("data-value")));, sputa che è una stringa entrambe le volte (che è previsto). Per quanto ne so, tutto in un attributo html è considerato una stringa, solo librerie diverse possono avere un comportamento predefinito che le interpreta in modo diverso.

Inoltre, un modo veloce per ottenere un numero sarebbe qualcosa sulla falsariga di ...

var someNumber = +$(someElt).data("value"); 

il + causerà tipo di coercizione, se il valore restituito è una stringa, o lasciarlo solo se si tratta di già un numero.

Answer 5

Per impostazione predefinita, qualsiasi cosa analizzata da un attributo sarà una stringa, sarà necessario convertirla in un numero se è necessario utilizzarlo come numero. Il modo migliore sono stato in grado di gestire questo è avvolgendolo con la funzione Number (javascript nativo)

var number = Number($(this).data("value")); 

parseInt restituirà un intero (numero intero), quindi se si desidera mantenere i valori decimali dovrai usare Number. Parola di cautela con parseInt, è sempre meglio specificare la base se si desidera analizzare un int, parseInt ($ (questo) .data ("valore"), 10);

Answer 6

Guardando attraverso il codice sorgente di jQuery, ho identificato il motivo.

Lo analizzerà come un numero, se e solo se, così facendo, non cambierà la stringa. Fonte: https://github.com/jquery/jquery/blob/master/src/data.js#L36

(+"2.0") + "" === "2" // !== the original string 
(+"2.1") + "" === "2.1" // == the original string