Question

在GraphQL中，您可以编写如下代码来定义查询：

const USER_QUERY = gql`
  {
    user(id: 2) {
      name
    }
  }
`

在样式化的组件中，您可以定义这样的样式化的组件：

const Button = styled.button`
    background-color: papayawhip;
`

这是什么语法？我知道使用模板文字可以使用以下语法来细分变量：${foo}，但我从未见过使用它。任何指导将不胜感激。

Answer 1

这些是tagged template literals。背包之前的部分是对将调用以处理字符串的函数的引用。

函数将变量（${}部分）作为参数以及包围变量的字符串部分（作为数组传递）传递给参数。函数的返回值成为模板的值。由于这种非常通用的格式，因此您几乎可以使用该函数执行任何操作。这是一个快速且肮脏的示例，该示例将变量（为方便起见，聚集到数组中），将其变为大写，然后将其放回字符串中：

function upperV(strings, ...vars) {
  /* make vars uppercase */
  console.log("vars: ", vars)       // an array of the passed in variables
  console.log("strings:", strings)  // the string parts

  // put them together
  return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}

let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)

Answer 2

模板文字有一个称为标记模板的附加功能。这就是反引号前面的前缀。前缀实际上是函数的名称-函数会传递模板字符串的常量部分和内插值（${}部分中的内容），并且可以将结果字符串处理为所需的字符串（尽管通常是另一个字符串）字符串，不一定必须）。

有关标记模板如何工作的更多详细信息，请参见this page on MDN。

ES6中的变量定义之后的模板文字（反引号）的目的是什么？

2 个答案: