HTML5 data- *屬性類型投射字符串和數字

Question

爲什麼data-value="2.0"的值會強制轉換爲字符串，而data-value="2.5"的值會強制轉換爲Number？ 我可以在我的功能內處理這個問題。我只是想更多地瞭解Javascript如何處理Numbers和Strings。這種感覺讓我措手不及。

<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

這些值只是簡單的字符串香草javascript;它不會嘗試自行進行任何轉換。

[...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的，另一方面，試圖確定，並且當經由data()存取數據屬性轉換爲相應的類型。這是（可以說）與他們的實施問題。他們documentation（重點煤礦）實際上解決了這個：

每次嘗試的字符串到JavaScript值（包括布爾，數字，對象，數組和null）轉換。如果這樣做不會更改值的表示形式，則只會將值轉換爲數字。 例如，「1E02」和「100.000」與數字（數值100）等效，但轉換它們會改變它們的表示形式，因此它們保留爲字符串。字符串值「100」被轉換爲數字100

_{參見HTMLElement. dataset}

Answer 2

這似乎是治療像字符串的數目，即」 0.0" 擴展名。

如果您的所有數據值都將在該格式將進來的，只是鞭那些吸盤這樣的parseFloat()：

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

這樣，如果他們是字符串或數字都不會有問題，他們將始終被視爲數字（完整的小數）。

Answer 3

正如tymeJV提到的，這看起來像jquery處理自動轉換的問題。如果你使用「2」，它也給出了一個數字，所以我猜它只是一個奇怪的邊緣情況，在他們如何處理事情。我會鼓勵使用.attr（'xxx'）並將數據解析爲其已知類型。

Answer 4

我認爲這更多的是關於jQuery如何識別數字的問題。如果您使用alert(typeof(this.getAttribute("data-value")));，它會吐出它是一個字符串兩次（這是預期的）。據我所知，html屬性中的所有內容都被認爲是一個字符串，只是不同的庫可能具有不同的解釋它們的默認行爲。

此外，速記方式來獲得一個數量會沿着線的東西...

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

的+會導致類型轉換，如果返回值是一個字符串，或息事寧人，如果它是已經是一個數字。

Answer 5

默認情況下，從屬性解析的任何東西都是一個字符串，如果需要將其作爲數字使用，則需要將其轉換爲數字。我已經能夠處理這種情況最好的辦法是通過與數函數進行包裝（本地JavaScript）

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

parseInt函數將返回一個整數（整數），所以如果你想保持你的十進制值你需要使用數字。 用parseInt注意的話，如果你想分析一個int，指定基地永遠是最好的， parseInt（$（this）.data（「value」），10）;

Answer 6

翻看jQuery的源代碼，我已經確定了原因。

它會將其解析爲一個數字，如果且僅當這樣做不會更改字符串。來源：https://github.com/jquery/jquery/blob/master/src/data.js#L36

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