我们可以更改javascript中另一个变量中存储的变量的值吗

Question

有一个变量，说var content ，其中包含一些HTML内容，并且该HTML还包含一个JavaScript变量，说${id} 。 现在，我想更新${id}变量的值。 我已经尝试使用以下代码，但无法正常工作。

var id = '';
var content = `<div class="row well margin_btm_ten">
    <div class="col-md-1">
        <b>ID is ${id}</b>  
    </div>`;
row_id = 2;
setTimeout(function(){
    console.log(content)
});

Answer 1

您可以让content是一个返回html内容的函数，以便它在每次调用时都会对其进行计算。 这样，如果id变量更改，则content（）返回的值也将更改：

 var id = 'one'; var content = () => `<div class="row well margin_btm_ten"> <div class="col-md-1"> <b>ID is ${id}</b> </div>`; console.log(content()); id = 'two'; console.log(content()); 

Answer 2

这是不可能的，因为正在使用变量id的当前值创建对“ content”的引用。 JavaScript变量基本上是用于存储数据值的容器。 您需要“重新运行” content变量，以获取新的id 。 但是我认为您应该使用函数而不是覆盖变量。

 const printName = (name => console.log(`Hello ${name}`)); let name = "Mark"; printName(name); name = "Peter"; printName(name); 

Answer 3

您可以使id为具有id属性的自定义设置器的函数，每次设置新的id时都会使content更新。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/set

 function id() { var id; Object.defineProperty(this, 'id', { get() { return id; }, set(value) { id = value; content = `<div class="row well margin_btm_ten"> <div class="col-md-1"> <b>ID is ${id}</b> </div>`; }, enumerable: true, configurable: true }); }; var obj = new id(); var content = `<div class="row well margin_btm_ten"> <div class="col-md-1"> <b>ID is ${obj.id}</b> </div>`; console.log(content) // id: undefined app.innerHTML += content obj.id = 2; console.log(content) // id: 2 app.innerHTML += content obj.id = 'Hello World!'; console.log(content) // id: 'Hello World' app.innerHTML += content 

 <div id="app"></div>