在ES6中遵循变量定义的模板文字(反引号)的目的是什么？

Question

在GraphQL中,您可以编写类似这样的内容来定义查询:

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

在样式化组件中,您可以像这样定义样式化组件:

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

这是什么语法？我知道使用模板文字你可以使用这种语法来修改变量:${foo}但是我从未见过使用它.任何指导将不胜感激.

Answer 1

这些是标记的模板文字.背包之前的部分是对将被调用以处理字符串的函数的引用.

该函数将变量(${}部分)作为参数传递,并将变量周围的字符串传递给数组.函数的返回值成为模板的值.由于这种非常通用的格式,您几乎可以使用该函数执行任何操作.这是一个快速而又脏的示例,它接受变量(为方便起见,聚集到数组中),使它们成为大写,然后将它们放回到字符串中:

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

模板文字还有一个名为标记模板的附加功能.这就是开场反击之前的前缀.前缀实际上是函数的名称 - 函数传递模板字符串的常量部分和插值(${}部分中的东西),并且可以将结果字符串处理成它想要的任何内容(尽管通常是另一个字符串,但不是不得不).

有关标记模板如何工作的更多详细信息,请参阅MDN上的此页面.