为什么JavaScript对象属性不能使用反引号？有什么替代方案？

这种写法不符合ECMAScript官方语法规范，不存在部分浏览器兼容的情况，所有符合标准的JS引擎都会抛出unexpected token错误。

JS对象字面量的属性名静态声明位置，原生仅支持三种合法形式：

• 合法的标识符（比如test1，无需加引号）
• 单引号包裹的字符串字面量
• 双引号包裹的字符串字面量

而反引号包裹的模板字面量本质是可计算的表达式，不属于静态字符串字面量范畴，因此不能直接放在属性名的静态声明位置。

替代方案 #

最简单的兼容方案是使用ES2015引入的计算属性名语法，把模板字面量放在方括号[]内即可：

const test = {
  [`test1`]: "test2"
}

该写法兼容性覆盖所有现代浏览器（Chrome 45+、Firefox 34+、Safari 9+、Edge 12+）以及Node.js 6.0+版本，可直接在生产环境使用。

如果需要动态拼接属性名，计算属性也天然支持模板字面量的插值语法：

const suffix = "1"
const test = {
  [`test${suffix}`]: "test2"
}
// 最终生成属性为 test1: "test2"

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