javascript - ES6 中函数后面的模板文字(反引号)的用途是什么？

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)