JavaScript字符串右向旋转代码异常：页面被字符串填满问题排查

你的代码核心问题是substring方法的参数使用错误，导致字符串每次循环都在无意义累加，最终填满页面。

错误细节： #

1. text.substring(text.length - 1, 0)：substring的规则是如果第一个参数大于第二个，会自动交换两者位置。所以这个写法等价于text.substring(0, text.length - 1)，取到的是原字符串去掉最后一个字符的全部内容，而非你想要的「最后一个字符」。
2. text.substring(0, text.length - 2)：这里应该取原字符串去掉最后一个字符的部分，你写成text.length - 2会多砍掉一个字符；再结合前面的错误，每次循环后的字符串会变成「原字符串去掉最后一个字符」+「原字符串去掉最后两个字符」，长度直接翻倍还多，自然会越变越长直到填满页面。

修复后的代码： #

用更直观的slice方法实现字符旋转（或者修正substring的用法）：

function animation() {
  var text = document.getElementsByTagName("p")[0].innerHTML;
  setInterval(function() {
    // 取最后一个字符 + 取前面所有字符（除了最后一个）
    text = text.slice(-1) + text.slice(0, -1);
    document.getElementsByTagName("p")[0].innerHTML = text;
  }, 100);
}

或者用修正后的substring写法：

function animation() {
  var text = document.getElementsByTagName("p")[0].innerHTML;
  setInterval(function() {
    text = text.substring(text.length - 1) + text.substring(0, text.length - 1);
    document.getElementsByTagName("p")[0].innerHTML = text;
  }, 100);
}

HTML部分保持不变：

<body onload="animation()">
  <p>JavaScript</p>
</body>

原理说明： #

• text.slice(-1)：直接取字符串的最后一个字符（slice支持负数索引，-1代表倒数第一个位置）。
• text.slice(0, -1)：取从开头到倒数第二个字符的所有内容，也就是去掉最后一个字符的原字符串。
  两者拼接后就实现了「把最后一个字符移到开头」的右旋转效果，每次循环字符串长度保持不变，不会无限增长。

内容的提问来源于stack exchange，提问作者Simorq