HTML5 data- *屬性類型轉換字符串和數字

Question

為什么data-value="2.0"的值轉換為String而data-value="2.5"轉換為Number？ 我可以在我的功能中處理這個問題。 我只是想了解一下Javascript如何處理數字和字符串。 這讓我措手不及。

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

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

[擺弄它]

Answer 1

這些值只是字符串到vanilla 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()訪問數據屬性時嘗試確定並轉換為適當的類型。 這（可以說）是他們實施的問題。 他們的文檔 （強調我的）實際上解決了這個：

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

_{另見HTMLElement. dataset HTMLElement. dataset}

Answer 2

通過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

Answer 3

默認情況下，從屬性解析的任何內容都是字符串，如果需要將其用作數字，則需要將其轉換為數字。 我能夠處理的最好方法是使用Number函數（本機javascript）包裝它

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

parseInt將返回一個整數（整數），因此如果要保留小數值，則需要使用Number。 謹慎使用parseInt，如果要解析int，parseInt（$（this）.data（“value”），10），最好指定基數;

Answer 4

它似乎將數字的“.0”擴展視為字符串。

如果你的所有數據值都以這種格式進入，只需在這些吸盤上鞭打一個parseFloat() ，如下所示：

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

這樣，無論它們是字符串還是數字都無關緊要，它們將始終被視為數字（小數完整）。

Answer 5

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

Answer 6

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

此外，獲得數字的簡便方法將是......

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

如果返回的值是一個字符串，+將導致類型強制，如果它已經是一個數字，則保持不變。