javascript - 如果要从中减去一个数字，为​​什么必须在每次提示消息后再次声明一个变量？ JavaScript

Question

这是一个很难用语言表达的问题，但我正在开展一项疯狂的库挑战，目标是通过问题提示用户 3 次，以在文本字段中添加名词、动词和形容词。在这些提示消息中，将有一个变量，其中包含用户要回答的问题数量。因此，在每次提示后，他们成功回答下一个提示时将少问 1 个问题。我不明白的是为什么下面的代码不起作用......

var questions = 3;
var questionsLeft = " (" + questions + " questions left)"
var adjective = prompt('Please type an adjective' + questionsLeft);
questions -= 1;
var verb = prompt('Please type a verb' + questionsLeft);
questions -= 1;
var noun = prompt('Please type a noun' + questionsLeft);
alert('All done. Ready for the message?');
var sentence = "<h2>There once was a " + adjective;
sentence += ' programmer who wanted to use JavaScript to ' + verb;
sentence += ' the ' + noun + '.</h2>';
document.write(sentence);

为了使该程序正常工作，您必须在每次提示后再次声明 questionsLeft = "("+ questions + "questions left)" ...我想只需添加 questions - = 1 每次提示它都可以工作后，但我只是想了解这是为什么？

最终产品如下所示，以便您可以清楚地看到差异...

var questions = 3;
var questionsLeft = " (" + questions + " questions left)"
var adjective = prompt('Please type an adjective' + questionsLeft);
questions -= 1;
questionsLeft = " (" + questions + " questions left)"
var verb = prompt('Please type a verb' + questionsLeft);
questions -= 1;
questionsLeft = " (" + questions + " questions left)"
var noun = prompt('Please type a noun' + questionsLeft);
alert('All done. Ready for the message?');
var sentence = "<h2>There once was a " + adjective;
sentence += ' programmer who wanted to use JavaScript to ' + verb;
sentence += ' the ' + noun + '.</h2>';
document.write(sentence);

Answer 1

那是因为当您创建一个字符串时，如下所示:

" (" + questions + " questions left)"

该字符串对其包含的变量不有依赖性。

变量的值在创建字符串时被替换。

要解决此问题，可以将替换推迟到真正需要时为止(但这可能会导致重复的字符串):

var questions = 3;
var adjective = prompt('Please type an adjective (' + questions + " questions left)");
questions -= 1;
var verb = prompt('Please type a verb (' + questions + " questions left)");
questions -= 1;
var noun = prompt('Please type a noun (' + questions + " questions left)");
alert('All done. Ready for the message?');
var sentence = "<h2>There once was a " + adjective;
sentence += ' programmer who wanted to use JavaScript to ' + verb;
sentence += ' the ' + noun + '.</h2>';
document.write(sentence);

<小时/>

或者，您可以使用 ES6 标记的​​模板文字做一些不错的事情:

const templateCreator = (strings, ...indices) => (...substitutions) => strings.slice(1).reduce((acc, string, index) => acc + substitutions[indices[index]] + string, strings[0])

var questions = 3;

var templateFunction = templateCreator `Please type a${0} (${1} questions left)`

var adjective = prompt(templateFunction('n adjective', questions));
questions -= 1;
var verb = prompt(templateFunction(' verb', questions));
questions -= 1;
var noun = prompt(templateFunction(' noun', questions));
alert('All done. Ready for the message?');
var sentence = "<h2>There once was a " + adjective;
sentence += ' programmer who wanted to use JavaScript to ' + verb;
sentence += ' the ' + noun + '.</h2>';
document.write(sentence);

通过使用上述解决方案，您可以拥有一个函数形式的可重用模板，您可以使用不同的参数调用任意多次。

这就是模板文字的用途。

但请注意，我们仍然在每次调用 templateFunction 时传递了 questions 变量。

<小时/>

最后，我们可以更进一步，创建另一个函数，它包装 templateFunction，并将 questions 变量作为闭包:

const templateCreator = (strings, ...indices) => (...substitutions) => strings.slice(1).reduce((acc, string, index) => acc + substitutions[indices[index]] + string, strings[0])

var questions = 3;

var templateFunction = wordClass => (templateCreator `Please type a${0} (${1} questions left)`)(wordClass, questions)

var adjective = prompt(templateFunction('n adjective'));
questions -= 1;
var verb = prompt(templateFunction(' verb'));
questions -= 1;
var noun = prompt(templateFunction(' noun'));
alert('All done. Ready for the message?');
var sentence = "<h2>There once was a " + adjective;
sentence += ' programmer who wanted to use JavaScript to ' + verb;
sentence += ' the ' + noun + '.</h2>';
document.write(sentence);