Javascript命令“返回”无意中加倍自身

Question

我有以下问题：

我试图在一个混合了一些 Javascript 的普通 HTML 页面中编写一个简单的程序，以便用函数的结果填充特定的 div。

函数的结果由一串文本组成，在一行破折号下方，破折号的数量与文本字符串中的字符数一样多。

我的代码如下，在body里面：

<div id="div1"></div>

<script>
let tab = "";

function result(text) {
for (i in text) {
tab += '-';
}
return "<p>" + tab + "<br>" + text + "</p>";
}

document.getElementById("div1").innerHTML = result("Bear") + result("Bear") + result("Bear");
</script>

呈现的 HTML 返回以下结果：

只有函数的第一次调用按预期工作：4 个破折号代表 4 个字母。但是第二次调用渲染的破折号是两倍，第三次是三倍。

也许“return”不是要使用的命令？

Answer 1

它已经回答了。不同的观点可能会有所帮助：

问题&。修复

每个调用 result(text) 都会向 global 变量 tab 添加破折号（这里是相同长度的 3 倍：4 + 4 + 4）。 通常let关键字描述如下：

• 声明一个作用域变量，它只在当前[作用域]内有效并且有生命周期（这里：对于整个脚本，不仅在函数内部） .

注释并正确格式化（适当的缩进便于阅读！）您的脚本：

let tab = ""; // declared at start of the script, means global scope

function result(text) {
    // move declaration here so it always is reborn (local scope = new lifetime)
    for (i in text) {
        tab += '-';
    }
    return "<p>" + tab + "<br>" + text + "</p>";
}

根据您描述的意图，作用域应该在函数内声明。所以它具有本地范围（仅在函数内部已知）。 此外，它会在每次调用函数时自动重置。

另类

在旧的控制台使用 (Text-UI) 和 ASCII-Art 中，使用任何字符（如破折号 -）绘制文本行的基本方法被描述为：

• 用字符 a 填充 n 个字符的宽度
• 返回包含重复 n 次的字符 a 的字符串

于是他们发明了fillString( a, n ) 或a.repeat( n ) 之类的函数。 类似的可以在 JavaScript 中完成。

好处：

1. 您可以参数化填充字符，例如 = 或 _
2. 您可以轻松重用这个通用函数

奖励：评论

我的经验告诉我要注意代码中的命名。 表达意图和目的，以便您和其他人现在（以及 6 个月后）一目了然地看到变量和函数的变化。

• 大多数函数都会返回一个结果，这会做更多的事情：function addSameWidthLineAbove(text)
• let line 或 textualBorder 或 dashes

Answer 2

您只在程序开始时将tab 设置为一个空字符串。

您不要在函数内将其设置为空字符串。

所以它永远不会 reset 为空字符串。

每次调用该函数时，tab 都会将破折号添加到那里。

如果您想在每次调用函数时重置它，请在函数内部重置它。