如何在JavaScript的对象属性名中使用变量拼接字符串

问题原因 #

你遇到的报错是因为传统对象字面量的键名默认会被解析为静态字符串，不能直接在声明阶段用字符串拼接、变量代入这类动态表达式作为键，JS解析器读到+号时会判定语法不符合预期，才抛出, expected的错误。

解决方案 #

方案1：ES6 计算属性名（推荐，适配所有现代浏览器）

在对象字面量中用方括号[]包裹动态表达式作为键，同时可以搭配模板字符串简化拼接逻辑：

let parallaxBp = 768;

ScrollTrigger.matchMedia({
  // 方括号包裹动态键，内部可以写任意合法的JS表达式
  [`(min-width: ${parallaxBp}px)`]: function() {
    // 你的业务代码
  }
});

如果你不想用模板字符串，用传统拼接写法也可以，只要放在方括号内即可：["(min-width: " + parallaxBp + "px)"]

方案2：ES5 兼容写法

如果需要兼容非常老的不支持ES6的环境，可以先声明空对象，再通过方括号语法动态挂载属性：

let parallaxBp = 768;
let mediaConfig = {};
// 动态给对象赋值属性
mediaConfig["(min-width: " + parallaxBp + "px)"] = function() {
  // 你的业务代码
};

ScrollTrigger.matchMedia(mediaConfig);

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