能否使用模板字面量拼接变量名调用classList的toggle方法

可行性判断 #

你提到的直接用模板字面量拼接变量名调用的写法不可行。JavaScript解析器只会把模板字面量识别为字符串，不会自动将字符串作为变量名去查找对应的变量值，直接书写该语法会直接报错。

可落地的实现方式 #

• 临时解决方案（仅适用于全局变量场景）
  如果你的bigBoxLeft、bigBoxRight是声明在全局作用域下的变量，可以通过浏览器顶层window对象的属性访问规则实现：

window[`bigBox${player}`].classList.toggle("turnOff");

该方案局限性很强，只要变量不在全局作用域就会失效，不建议常规场景使用。

• 推荐通用解决方案
  你可以提前将两个DOM实例存入一个对象做映射，后续直接通过player的值读取对应元素即可：
  首先提前定义映射关系：

const bigBoxMap = {
  Left: bigBoxLeft,
  Right: bigBoxRight
}

需要调用toggle方法时直接取值即可：

bigBoxMap[player].classList.toggle("turnOff");

该方案不受作用域限制，后续如果新增其他player取值，只需要在bigBoxMap中新增对应键值对即可，可维护性更高。

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