HTML5 data- * тип и тип атрибутов

Почему значение data-value="2.0" передается в String и значение 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]

Ответы

Ответ 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>

Ответ 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

Ответ 3

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

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

parseInt вернет целое число (целое число), поэтому, если вы хотите сохранить десятичные значения, вам нужно будет использовать Number. Слово предостережения с parseInt, всегда лучше указать базу, если вы хотите разобрать int, parseInt ($ (this).data( "value" ), 10); Дел >

Ответ 4

Кажется, что обрабатывает расширение ".0" числа как строку.

Если все ваши значения данных будут поступать в этом формате, просто взломайте parseFloat() на этих присосках следующим образом:

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

Таким образом, не имеет значения, являются ли они строками или числами, они всегда будут обрабатываться как числа (целые десятичные числа).

Ответ 5

Как упоминалось в tymeJV, это выглядит как проблема с тем, как jquery обрабатывает автоконверсию. Если вы используете "2", он также дает номер, поэтому я предполагаю, что он просто странный крайний случай в том, как они обрабатывают вещи. Я бы посоветовал просто использовать .attr('xxx') и разобрать ваши данные по известному типу.

Ответ 6

Я думаю, что это больше вопрос о том, как jquery идентифицирует числа. Если вы используете alert(typeof(this.getAttribute("data-value")));, он выскальзывает, что это строка как раз (что ожидается). Насколько я знаю, все в атрибуте html считается строкой, только разные библиотеки могут иметь поведение по умолчанию, которое интерпретирует их по-разному.

Кроме того, сокращенный способ получить число будет чем-то вроде строк...

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

+ приведет к принуждению типа, если возвращаемое значение является строкой или оставить его в покое, если оно уже является числом.