JS中如何实现变量到变量的插值？按钮文本设置求助

你遇到的语法错误是因为btn${i}这种写法在当前上下文里完全无效——模板字符串${i}只能用来拼接字符串（比如生成"btn0"这个字符串），但没法直接把它当成变量名去读取btn0的实际值。下面给你几种靠谱的解决方案，按推荐程度排序：

1. 用数组存储按钮文本（最推荐） #

既然你的按钮是按顺序排列的，直接把文本放进数组里，索引和按钮的下标i一一对应，代码简洁又直观：

// 把所有按钮文本按顺序放进数组
const btnTexts = [
  "Load tasks from server",
  "Load tasks from Local Storage",
  "Create ...",
  "第四个按钮的文本" // 补充第四个按钮的内容
];

// 循环给按钮赋值
for (let i = 0; i < allButtons.length; i++) {
  allButtons[i].innerHTML = btnTexts[i];
}

2. 用对象映射变量名 #

如果一定要保留btn0、btn1这类命名习惯，可以把它们放进一个对象里，通过模板字符串拼接的属性名来访问：

const btnTexts = {
  btn0: "Load tasks from server",
  btn1: "Load tasks from Local Storage",
  btn2: "Create ...",
  btn3: "第四个按钮的文本"
};

for (let i = 0; i < allButtons.length; i++) {
  // 用模板字符串生成属性名，再从对象里取值
  allButtons[i].innerHTML = btnTexts[`btn${i}`];
}

3. 访问全局变量（不推荐，仅作了解） #

如果你的btn0、btn1是用var声明的全局变量（浏览器环境下会自动挂在window对象上），可以通过window[变量名字符串]的方式访问，但这种方式会污染全局环境，代码可读性也差，不建议使用：

var btn0 = "Load tasks from server";
var btn1 = "Load tasks from Local Storage";
var btn2 = "Create ...";
var btn3 = "第四个按钮的文本";

for (let i = 0; i < allButtons.length; i++) {
  allButtons[i].innerHTML = window[`btn${i}`];
}

为什么原来的写法会报错？ #

你写的allButtons[i].innerHTML = btn${i};是典型的语法错误——JavaScript会把btn当成普通变量，后面跟着${i}完全不符合语法规则。就算你改成`btn${i}`，它也只是一个字符串"btn0"，而不是变量btn0的实际值，自然没法直接赋值给按钮的innerHTML。

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