Dữ liệu HTML5- * loại chuỗi và số thuộc tính đúc

Question

Tại sao giá trị của data-value="2.0" được truyền vào một Chuỗi và giá trị là data-value="2.5" truyền sang một số? Tôi có thể xử lý khoản tiền phạt này trong chức năng của mình. Tôi chỉ cố gắng hiểu thêm một chút về cách Javascript xử lý Số và Chuỗi. Loại này khiến tôi mất cảnh giác.

<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

Giá trị đó chỉ đơn giản là chuỗi đến vani javascript; nó không cố gắng thực hiện bất kỳ chuyển đổi nào.

[...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, mặt khác, cố gắng xác định và chuyển đổi sang các loại thích hợp khi truy cập vào dữ liệu thuộc tính qua data(). Đó là (được cho là) ​​một vấn đề với việc thực hiện của họ. documentation (nhấn mạnh mỏ của tôi) thực sự giải quyết vấn đề này:

Mọi nỗ lực được thực hiện để chuyển đổi chuỗi thành giá trị JavaScript (bao gồm booleans, số, đối tượng, mảng và null). Giá trị chỉ được chuyển đổi thành một số nếu làm như vậy không thay đổi biểu diễn của giá trị. Ví dụ: "1E02" và "100.000" tương đương với số (giá trị số 100) nhưng chuyển đổi chúng sẽ thay đổi cách trình bày của chúng để chúng được để dưới dạng chuỗi. Giá trị chuỗi "100" được chuyển thành số 100.

_{Xem thêm HTMLElement. dataset}

Answer 2

Nó dường như được điều trị rằng" .0" mở rộng của số giống như một chuỗi.

Nếu tất cả các giá trị dữ liệu của bạn sẽ được sắp tới trong định dạng đó, chỉ cần whip một parseFloat() trên những suckers như thế này:

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

Bằng cách đó nó sẽ không vấn đề gì nếu họ là chuỗi hoặc số , chúng sẽ luôn được đối xử như những con số (số thập phân còn nguyên vẹn).

Answer 3

Như tymeJV đã đề cập, điều này có vẻ như là vấn đề với cách jquery xử lý tự động chuyển đổi. Nếu bạn sử dụng "2", nó cũng cho một số, vì vậy tôi đoán nó chỉ là một trường hợp cạnh kỳ lạ trong cách họ xử lý mọi thứ. Tôi sẽ khuyến khích chỉ sử dụng .attr ('xxx') và phân tích dữ liệu của bạn thành loại đã biết.

Answer 4

Tôi nghĩ rằng đó là câu hỏi về cách jquery xác định số. Nếu bạn sử dụng alert(typeof(this.getAttribute("data-value")));, nó phát ra rằng đó là một chuỗi cả hai lần (dự kiến). Theo tôi biết, mọi thứ trong một thuộc tính html được coi là một chuỗi, chỉ các thư viện khác nhau có thể có hành vi mặc định diễn giải chúng khác nhau.

Ngoài ra, một cách viết tắt để có được một số sẽ là một cái gì đó dọc theo dòng của ...

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

dấu + sẽ gây ra loại ép buộc nếu giá trị trả về là một chuỗi, hoặc để lại nó một mình nếu nó đã là một số.

Answer 5

Theo mặc định, mọi thứ được phân tích cú pháp từ một thuộc tính sẽ là một chuỗi, bạn sẽ cần phải chuyển đổi nó thành một số nếu bạn cần sử dụng nó làm số. Cách tốt nhất mà tôi đã có thể xử lý này là bằng cách gói nó với chức năng Number (javascript mẹ đẻ)

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

parseInt sẽ trả về một số nguyên (số nguyên), vì vậy nếu bạn muốn giữ lại giá trị thập phân của bạn bạn sẽ cần sử dụng Số. Lời cảnh cáo với parseInt, tốt hơn là chỉ định cơ sở nếu bạn muốn phân tích cú pháp int, parseInt ($ (this) .data ("value"), 10);

Answer 6

Nhìn qua mã nguồn của jQuery, tôi đã xác định được lý do.

Nó sẽ phân tích cú pháp dưới dạng số, nếu và chỉ khi làm như vậy thì không thay đổi chuỗi. Nguồn: https://github.com/jquery/jquery/blob/master/src/data.js#L36

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