在模板文字中使用 ES6 扩展语法答案

【问题标题】：Using ES6 spread syntax in template literal在模板文字中使用 ES6 扩展语法
【发布时间】：2017-07-27 02:42:49
【问题描述】：

我需要动态定义类，所以在我的 ES6 代码中编写了代码生成器：

function makeClass(className, baseClass = _DefaultBaseClass, ...args) {
  return (
    eval(`
      class ${className} extends ${baseClass} {
        constructor(${...args}) {
          super(${...args})
        }
      }
   `)
  )
}

'_DefaultBaseClass'是一个空类，用于简化上述生成器函数逻辑：

class _DefaultBaseClass() {
  constructor() {}
}

除了展开运算符之外，生成器代码一切正常。在本示例中，扩展运算符本身在我的项目中在模板文字之外工作正常。

我正在使用以下 webpack Babel 预设/插件：'react'、'es2015'、'stage-2'、'transform-runtime'。

【问题讨论】：

当constructor 只调用super 时，为什么不干脆直接删除它——默认构造函数就是这样做的
... is not an operator。它是数组字面量、函数定义、函数调用和数组解构赋值语法的一部分。这不是一个独立的东西。 ... 不是模板文字的一部分。
@FelixKling 感谢您的信息；很有帮助。
@FelixKling 但你可以做: `${[...args]}` 并且工作！ :)

标签： ecmascript-6 template-literals

【解决方案1】：

正如 cmets 中提到的，... 绑定到特定的用例。 ${...args} 甚至没有多大意义。结果应该是什么？例如。如果${...args} 等价于${args[0],args[1]}，那么它将评估为args[1] 的值，因为这里, 是一个逗号运算符。

模板文字可以包含任意表达式，因此您可以执行以下操作：

`${args.join(",")}`

【讨论】：

感谢您的回答/见解。我倾向于使用${...args} 背后的想法是，在makeClass 函数体中，args 是一个数组；因此我认为我应该能够使用 ... 语法在 eval 部分中“扩展”数组，以实现对构造函数的多个输入。您关于逗号运算符的观点非常有帮助。