JS实现计算器按钮加载异常，显示${button.symbol}而非实际符号如何解决

• JavaScript 中的${变量}插值是 ES6 模板字符串的专属特性，仅当字符串用反引号（`）包裹时才会被解析执行。
• 你的代码中生成按钮标签的字符串使用单引号（'）包裹，插值表达式会被识别为普通文本直接输出，因此按钮上会直接显示${button.symbol}而非变量对应的实际值。

直接将生成按钮代码中包裹 HTML 字符串的单引号替换为反引号即可，修复后的完整代码如下：

function createCalculatorButtons(){
  const buttons_row =  6;
  let added_buttons= 0;

  calculator_buttons.forEach(button =>{
    if(added_buttons % buttons_row == 0){
     input_element.innerHTML += '<div class="row"></div>';
    }
    const row = document.querySelector(".row:last-child");
    row.innerHTML += `<button id = "${button.name}">${button.symbol}</button>`;
    added_buttons++;                
  })
}

如果你的运行环境不支持 ES6 语法，也可以使用传统字符串拼接的方式实现：

row.innerHTML += '<button id = "' + button.name + '">' + button.symbol + '</button>';

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