HTML5 data- * type type casting strings and numbers

Question

Почему значение data-value="2.0" относится к строкам, а значение data-value="2.5" относится к числу? Я могу справиться с этим штрафом в рамках моей функции. Я просто пытаюсь понять немного больше о том, как 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")); 
}); 

[ 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 (это включает в себя булевы, числа, объекты, массивы и нуль). Значение преобразуется только в число, если это не изменяет представление значения. Например, «1E02» и «100.000» эквивалентны цифрам (числовое значение 100), но их преобразование изменит их представление, чтобы они оставались в виде строк. значение строки «100» преобразуется в количестве 100.

_{Смотрите также HTMLElement. dataset}

Answer 2

Это, кажется, что лечение».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

По умолчанию все, что анализируется атрибутом, будет строкой, вам нужно будет преобразовать его в число, если вам нужно использовать его как число. Лучший способ я был в состоянии справиться с этим, окружив его с помощью функции Number (родной Javascript)

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

ParseInt будет возвращать целое число (целое число), так что если вы хотите сохранить ваши десятичные значения вам нужно будет использовать Number. Осторожно с 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