JavaScript嵌套变量值能否修改？模板字符串HTML变量更新故障

1. 在JavaScript中，我们能否修改存储在另一个变量中的变量的值？ #

这得分情况讨论，核心取决于变量存储的是基本类型还是引用类型：

• 基本类型（字符串、数字、布尔值、null、undefined、Symbol）：这类值是直接存在栈内存里的，当你把一个基本类型变量赋值给另一个变量时，本质是复制了一份值的副本。所以修改原变量不会影响另一个变量，反过来也一样。举个例子：

  let a = 10;
  let b = a;
  a = 20;
  console.log(b); // 输出10，不会跟着改变
  

• 引用类型（对象、数组、函数等）：这类值存在堆内存中，变量存储的只是指向堆内存的地址。当你把引用类型变量赋值给另一个变量时，复制的是这个地址，两个变量指向同一个对象。所以修改原对象的属性时，另一个变量访问的对象也会同步变化：

  let obj1 = { name: "Alice" };
  let obj2 = obj1;
  obj1.name = "Bob";
  console.log(obj2.name); // 输出Bob，因为指向同一个对象
  

2. 为什么更新${id}后content没有变化？ #

你的问题出在模板字符串的插值是一次性计算的。当你执行var content = <div...${id}>这行代码时，JavaScript会立刻把当时id的当前值（空字符串）插入到模板中，生成固定的字符串并赋值给content。之后不管你怎么修改id或者row_id，content`已经是一个静态字符串了，不会自动更新。

要解决这个问题，有两种常用方案：

方法一：把content改成函数，需要时重新生成字符串 #

这样每次调用函数，都会用最新的id值重新插值生成HTML：

var id = ''; 
function getContent() {
  return `<div class="row well margin_btm_ten"> <div class="col-md-1"> <b>ID is ${id}</b> </div>`;
}
id = 2; 
setTimeout(function(){ 
  console.log(getContent()); // 输出包含"ID is 2"的HTML字符串
});

方法二：每次更新id后重新赋值content #

如果不需要频繁生成，也可以直接在修改id后重新计算content：

var id = ''; 
var content = `<div class="row well margin_btm_ten"> <div class="col-md-1"> <b>ID is ${id}</b> </div>`;
id = 2; 
// 更新id后重新生成content
content = `<div class="row well margin_btm_ten"> <div class="col-md-1"> <b>ID is ${id}</b> </div>`;
setTimeout(function(){ 
  console.log(content); // 输出包含"ID is 2"的HTML字符串
});

另外注意你的代码里用了row_id = 2但没把它赋值给id，这也是一个小疏漏，得确保你更新的是模板里实际用到的id变量哦。

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