HTML5 Daten- * Attribut Typ Casting Strings und Zahlen

Question

Warum ist der Wert von data-value="2.0" auf einen String und der Wert data-value="2.5" auf eine Zahl umgewandelt? Ich kann das gut innerhalb meiner Funktion handhaben. Ich versuche nur ein wenig mehr darüber zu verstehen, wie Javascript mit Zahlen und Strings umgeht. Diese Art von überrascht mich.

<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

Diese Werte sind einfach Zeichenfolgen zu Vanille Javascript; Es versucht keine Konvertierung für sich.

[...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, auf der anderen Seite versucht, in den entsprechenden Typ zu bestimmen und zu konvertieren, wenn Daten über data() Attribute zugreifen. Es ist (wohl) ein Problem mit ihrer Umsetzung. Ihre documentation (Hervorhebung von mir) tatsächlich adressiert diese:

Jeder Versuch unternommen wird, den String in einem JavaScript-Wert zu konvertieren (dies schließt booleans, Zahlen, Objekte, Arrays und null). Ein Wert wird nur in eine Zahl konvertiert, wenn dadurch die Darstellung des Werts nicht geändert wird. Zum Beispiel sind "1E02" und "100.000" äquivalent als Zahlen (numerischer Wert 100), aber das Konvertieren würde ihre Darstellung verändern, so dass sie als Strings übrig bleiben. Der String-Wert „100“ auf die Zahl umgewandelt 100.

_{Siehe auch HTMLElement. dataset}

Answer 2

Es scheint wie eine Zeichenfolge, die „0,0" Erweiterung der Anzahl der Behandlung zu werden.

Wenn alle Ihre Datenwerte kommen in in diesem Format zu gehen, Peitsche nur parseFloat() auf diesen Sauger wie folgt aus:

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

diese Weise wird es keine Rolle, wenn sie Strings oder Zahlen , sie werden immer wie Zahlen behandelt (Dezimalstellen intakt).

Answer 3

Wie tymeJV erwähnt, sieht dies wie ein Problem mit der Frage aus, wie jQuery die Autokonversion behandelt. Wenn Sie "2" verwenden, gibt es auch eine Zahl, also vermute ich, dass es nur ein seltsamer Randfall ist, wie sie mit Dingen umgehen. Ich würde ermutigen, nur mit .attr ('xxx') und analysieren Sie Ihre Daten zu seinem bekannten Typ.

Answer 4

Ich denke, es ist eher eine Frage darüber, wie Jquery Zahlen identifiziert. Wenn Sie alert(typeof(this.getAttribute("data-value"))); verwenden, spuckt es aus, dass es eine Zeichenfolge beide Male ist (was erwartet wird). Soweit ich weiß, wird alles in einem html-Attribut als eine Zeichenfolge betrachtet, nur unterschiedliche Bibliotheken haben möglicherweise ein Standardverhalten, das sie anders interpretiert.

Auch eine Abkürzung Weg, um eine Zahl zu erhalten, wäre etwas entlang der Linien von ...

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

die + wird Typ Zwang führen, wenn der zurückgegebene Wert ein String ist, oder lassen sie allein, wenn es schon eine Nummer.

Answer 5

Standardmäßig ist alles, was von einem Attribut analysiert wird, eine Zeichenfolge, Sie müssen sie in eine Zahl konvertieren, wenn Sie sie als Zahl verwenden müssen. Der beste Weg, ich habe in der Lage, dies zu umgehen, besteht darin, die Anzahl Funktion (native Javascript) Umwickeln

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

ParseInt wird eine ganze Zahl (ganze Zahl) zurückkehren, so dass, wenn Sie möchten, dass Ihre Dezimalwerte halten Sie müssen Nummer verwenden. Wort der Vorsicht mit parseInt, es ist immer besser, die Basis anzugeben, wenn Sie einen int, parseInt ($ (this) .data ("Wert"), 10) analysieren;

Answer 6

Durch den Quellcode von jQuery, habe ich den Grund identifiziert.

Es wird es als eine Zahl analysieren, wenn und nur wenn dies die Zeichenfolge nicht ändert. Quelle: https://github.com/jquery/jquery/blob/master/src/data.js#L36

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