javascript - html/javascript 如何知道属性是 bool 值而不是字符串

Question

这个问题已经有答案了:

Why is jQuery automatically parsing my data-* attributes? (1 个回答)

已关闭 4 年前。

在以下标签中:

<a href="#;" data-is_male="true">Male</a>
<a href="#;" data-is_male="false">Female</a>

<小时/>

var isMale = $(this).data('is_male');

javascript 如何知道 true 值是 boolean而不是string ？

Answer 1

Plain JS 不会将“false”解析为 false，“true”解析为 true，因此可以想象它最终可能为 1

然而，jQuery 将数据属性解析为 true/false 字符串的 bool 值

console.log(typeof document.querySelector("[data-is_male]").getAttribute("data-is_male"))

console.log(typeof $("[data-is_male]").data("is_male"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#;" data-is_male="true">Male</a>
<a href="#;" data-is_male="false">Female</a>

这是因为这个 jQuery 代码

function getData(data) {
  if (data === "true") {
    return true;
  }

  if (data === "false") {
    return false;
  }

  if (data === "null") {
    return null;
  }

  // Only convert to a number if it doesn't change the string
  if (data === +data + "") {
    return +data;
  }

  if (rbrace.test(data)) {
    return JSON.parse(data);
  }

  return data;
}

来自@connexo的附加信息

浏览器确实知道它是什么 - 因为它始终是一个字符串。存在一些内置的 Boolean 属性，例如表单输入元素上的 disabled 或 readonly 或 checked，但是它们的工作方式不同:

内置 bool 属性在元素对象上反射(reflect)为同名属性，并在元素拥有该属性后立即返回 true，与分配给该属性的值无关。反之亦然，如果您在元素上设置属性，它会自动获取该属性(以空 String 作为值)[checked 是异常(exception)，这是一个 -方式]。

检查此片段:

<input type="text" disabled="false" />

即使值 false 似乎表明输入未禁用，输入仍被禁用。

必须说的是，上面的 HTML 是无效的，因为规范只允许每个 bool 属性有两个值:空的 String

disabled=""

以及 bool 属性本身的名称

disabled="disabled"