javascript - 在 HTML 标签中存储数字是错误的吗？

Question

我正在学习如何将 Javascript 集成到 HTML 中，并且我想到了一些奇怪的代码。我不能肯定地说它是否有问题。

我的目标是创建一个显示在页面上的计数器，该计数器从 1 开始，并在每次调用函数时增加。

我原来的代码是这样的:

<p id="counter"></p>

<script>
var turn = 1, turn_counter = document.getElementById('counter');
turn_counter.innerHTML = turn;

function increase() {
  turn++
  turn_counter.innerHTML = turn;
}
</script>

变量turn会跟踪一个数字，并且 turn_counter将跟踪<p>标签。然后将该标签的内容设置为 turn 。当函数 increase()被称为它会增加 turn然后调整标签以匹配。

但是我意识到有一个潜在的更简单的解决方案:

<p id="counter">1</p>

<script>
var turn_counter = document.getElementById('counter');

function increase() {
  turn_counter.innerHTML++
}
</script>

这会在<p>内写入“1”标记，然后设置变量 turn_counter到那个标签。然后每当 increase()调用函数时它只是增加标签内的数字。

虽然这两种解决方案都有效，但我觉得使用第二个解决方案肯定存在一些问题。在 HTML 标记中存储变量感觉不太对劲。那么第二种解决方案有什么问题吗？

(此外，如果有更好的方法可以做到这一点，我会向他们开放。我对此仍然很陌生。)

Answer 1

虽然使用第一个解决方案，您实际上是在 Javascript 中存储变量，但在第二个示例中，您正在利用 Javascript“怪癖”，但这可能不是您想要的。

当您读取计数器div的innerHTML时，Javascript会找到一个字符串数字，如“1”，但由于“1”浅等于1，Javascript会尝试对其应用数学并执行您所要求的操作。

有效吗？是的。 是不是很糟糕？也是的。

但是为什么它有效呢？它之所以有效，是因为 Javascript 的类型强制和基于此的类型转换。

为什么不好？由于类型强制，这还不错，但不好是因为您将应用程序状态保存在 UI 层上，这是可行的，但不是一个好的操作。

在这种情况下，您没有存储变量，您只是利用了 Javascript 的奇怪行为。您可以解析innerHTML以将其转换为数字，但这还远不是一个解决方案，因为您无法正确保存JavaScript应用程序的“状态”，这是逻辑所在的位置!

您可以将 HTML 视为 UI 层(无样式)，但您希望将逻辑(如变量声明和使用)保留在 Javascript 内。

正如 @GrafiCode 在评论中提出的，您可以

const whatAmI_1 = div.innerHTML + 1
const whatAmI_2 = div.innerHTML++

typeof whatAmI_1 // string, 11
typeof whatAmI_2 // number, 2

这是因为增量运算符 (++) 解析字符串，将其转换为数字并应用必要的增量，而 + 1 被视为字符串的串联，因为第二个值 (+1) 被解析和转换通过 Javascript 来字符串。

@Wiktor Zychla 指出，也许“怪癖”这个词不足以解释 Javascript 所做的选择。类型强制并不是坏事或错误，它是 Javascript 的一部分，如果您知道它是什么以及如何使用它，您可以做很多事情。