能否在对象属性名声明中使用模板字面量？

我写了一个diagram.appendRichElements方法，它接收如下格式的对象作为参数：

{
  'polyline':{'id':'polyline-id','stroke':'#fee','stroke-width':'2'},
  'circle':{'id':'circle-id','cx':'10','cy':'10','r':'5','fill':'#fee'}
}

我想直接用模板字面量动态生成属性名，像这样调用方法：

diagram.appendRichElements({`${type}`:props});

但这段代码会报错。我在Firefox控制台测试了一段简化代码：

var n = 'test';
console.log({`${n}`:'coucou'});

得到错误提示：Uncaught SyntaxError: expected property name, got '${'。

请问有没有不用var o={}; o[n] = 'Hi!'这种分步赋值的方式，直接用模板字面量构建对象属性名的方法？

当然有，你需要用计算属性名的语法——把模板字面量（或变量）放在方括号[]里，就能直接作为对象的动态属性名。

修正后的调用代码应该是：

diagram.appendRichElements({[`${type}`]: props});

对应你在Firefox控制台的测试代码，改成这样就能正常运行：

var n = 'test';
console.log({[`${n}`]:'coucou'});
// 或者更简洁的写法，直接用变量：
console.log({[n]:'coucou'});

这个特性是ES6（ECMAScript 2015）新增的，只要你的运行环境支持ES6以上版本，就能直接使用。它的作用就是允许你在对象字面量中，用表达式动态定义属性名，不用再先创建空对象再赋值。

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