如何使用jQuery将HTML数据值获取为字符串？

Question

我在源HTML中有以下内容:

<li><a href="#" data-value="01">Test</a></li>

我想获取data属性的值，所以我使用了以下代码：

var abc = $(this).data('value');

这个方法可以正常工作，但如果有前导零则不行。例如上面的例子会将值“1”存入abc中。

是否有办法让它不将“01”转换为“1”？

- Samantha J T Star

---

可能是HTML数据和看起来像数字的字符串的重复问题。 - j08691

我不知道 data-value 是 <a> 元素的正确属性。使用 rel 属性会更好吧？ - JakeJ

@JakeJ - 请查看http://ejohn.org/blog/html-5-data-attributes/。 - j08691

@j08691 嗯，根据快速扫描，似乎是HTML5。然而，如果我在开发网站，我会避免使用大多数或所有HTML5功能（除非有优雅的回退），以包括所有旧浏览器。感谢链接，每天学到新东西:) +1 - JakeJ

Answer 1

this.dataset.value;

// Or old school
this.getAttribute('data-value');

const a = document.querySelector("a");
console.log('Using getAttribute, old school: ', a.getAttribute('data-value'));
console.log('Using dataset, conforms to data attributes: ', a.dataset.value);

<ul>
  <li><a href="#" data-value="01">Test</a></li>
</ul>

感谢@MaksymMelnyk指引我了解 dataset

- Ruan Mendes

---

谢谢，Florian。如果可能的话，我通常更喜欢用纯JS来回答问题。不过，如果OP已经在使用jQuery，那么attr可能是一个更好的选择，因为在某些边缘情况下，如属性是DOM使用的属性（例如obj.disabled），getAttribute在不同浏览器中可能会出现错误。 - Ruan Mendes

嗯，你可以使用 this.dataValue :) 我不知道这个方面是否有任何错误。 - Florian Margaine

@FlorianMargaine：我以前从未听说过这个。它似乎不起作用http://jsfiddle.net/uV9dv/ - Ruan Mendes

this.dataset.value 将拥有该值。 - Maksym Melnyk

Answer 2

你可以使用jQuery的attr()操作符：

var abc = $(this).attr('data-value');

- joeschmidt45

Answer 3

从jQuery data() documentation中可以看出，您需要使用.attr()方法来防止自动类型转换：

每次尝试将字符串转换为JavaScript值（包括布尔值、数字、对象、数组和null），否则它将保留为字符串。要检索该值的属性作为字符串，而不尝试转换它，请使用attr()方法。当数据属性是对象（以“{”开头）或数组（以“[”开头）时，则使用jQuery.parseJSON解析字符串；它必须遵循有效的JSON语法，包括引用的属性名称。数据属性在第一次访问数据属性时被拉取，然后不再被访问或改变（所有数据值都在jQuery内部存储）。

因此，为了避免进行类型转换而访问属性的方法是：

var abc = $(this).attr('data-value');

- Mike

Answer 4

$(this).attr('data-value');

这将返回带有前导0的字符串值。

- Bradley Mountford

Answer 5

你尝试过吗？：

$(this).attr('data-value');

或者

$(this).attr('data-value').toString();

- Josh Siok

---

$.attr 不需要 toString，它已经返回一个字符串了。即使它没有返回字符串，调用 toString 也无法将已经转换为数字的原始字符串恢复回来。 - Ruan Mendes

Answer 6

<article id="electric-cars" data-columns="3"data-index-number="12314" data-parent="cars">

</article>


const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.index-number // "12314"
article.dataset.parent // "cars"

- tharu ramesh

---

欢迎来到StackOverflow！虽然这个答案可能为OP的需求提供了解决方案，但请添加解释以使其更易于理解，不仅适用于OP，还适用于整个社区。 - xKobalt

请随时就该答案提出任何问题..！希望这能起作用..！ - tharu ramesh

Answer 7

尝试：

this.data('value');

我认为这是获取数据属性值的最佳方式。

- Shailesh Singh