JavaScript循环打印数字错位：整除替换字符串时输出偏移一位

嗨，我瞅了下你的代码，问题根源很明确：你用循环变量i做整除判断，但实际输出的数字是i+1，这就导致判断逻辑和要输出的数字完全错位了。

举个具体的例子：

• 当i=4时，代码走else分支输出4+1=5，但5本应该触发被5整除的条件输出"Apple"，可代码里判断的是i=4，4不满足被5整除，所以直接输出了5；
• 等到i=5时，判断5%5==0，输出"Apple"，但这时候对应的数字应该是6，这就出现了你看到的“偏移一位”的问题。

另外，你循环起始值是i=-1，第一个输出的是0，但你目标是打印1到100的数字，这也不符合需求。

修复后的代码 #

我们可以直接调整循环变量的范围，让i直接代表要输出的数字，这样逻辑会更清晰：

function testFunction() {
  var wrapper = document.getElementById("Test");
  var myHTML = '';
  // 让i直接从1到20（对应你要输出的1-20，改成1到100就是i<=100）
  for (var i = 1; i <= 20; i++) {
    if (i % 5 == 0 && i % 3 == 0) {
      myHTML += '<span class="test">Pineapple</span><br/>';
    } else if (i % 5 == 0) {
      myHTML += '<span class="test">Apple</span><br/>';
    } else if (i % 3 == 0) {
      myHTML += '<span class="test">Pine</span><br/>';
    } else {
      myHTML += '<span class="test">' + i + '</span><br/>';
    }
  }
  wrapper.innerHTML = myHTML
}

为什么这样改？ #

• 循环变量i直接对应要输出的数字，判断和输出完全对应，不会再出现错位；
• 起始值从1开始，正好匹配你要打印1到N的需求（如果要打印100个数字，把循环条件改成i <= 100即可）。

现在运行代码，5会被替换成"Apple"，15会替换成"Pineapple"，完全符合你的预期啦～

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