如何在包含Template Literals(Javascript)的数组中存储字符串



我正试图在数组中存储大量文本(这样我就可以使用值轻松地将其提取出来(。问题出在我想使用模板文字的字符串中,因此字符串会根据输入而变化(例如,一旦他们添加了自己的名称,就会使用自己的名称。

如果我在函数中包含字符串,我可以让它正常工作。例如:

textbox.textContent =  `what does ${nameTemp} do?`;

这没问题,它将"nameTemp"更改为用户输入的内容。但下面的不是!它总是返回"tim"作为名称("nameTemp"的默认值(

textbox.textContent2 = Title[1]; 

您可以在下面的函数saveName((中的代码中看到,第一行(包含完整字符串的模板文本(确实有效。但下面使用数组中的字符串(包含模板文本(的行不会更新。它使用默认字符串"tim"。我做错了什么?如何最好地将字符串存储在具有可更改元素的数组中?提前感谢您的任何建议。

var nameTemp = `tim`;
let Title = [];
Title[0] = "What are you called?";
Title[1] = `what does ${nameTemp} do?`;
const input = document.createElement('input');
input.type = "text";
input.id ="nameText";
input.className +='inputStyle';
function addNameInput()
{
container.appendChild(input);
}
function saveName()
{
if (nameText.value !== null)
{
nameTemp = nameText.value;
textbox.textContent =  `what does ${nameTemp} do?`; //This works, it displays the inputed name
textbox.textContent2 = Title[1];  // This will always display 'tim'
nameText.parentNode.removeChild(nameText);
incrementState();
}
}

Javascript模板字符串是在您第一次创建它们时评估的,它们不会神奇地更新。Title[1]是用"tim"初始化的,即使更改了nameTemp变量,它也将保持不变。如果你想在数组中存储模板字符串,那么你可以存储一个返回模板字符串的函数,比如:

Title[1] = () => `what does ${nameTemp} do?`;

然后你可以通过获得价值

textbox.textContent2 = Title[1]();

最新更新