ES6 中函数后面的模板文字（反引号）的目的是什么？答案

【问题标题】：What is the purpose of template literals (backticks) following a function in ES6?ES6 中函数后面的模板文字（反引号）的目的是什么？
【发布时间】：2019-04-29 16:24:25
【问题描述】：

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

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

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

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

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

【问题讨论】：

这个例子来自哪里？
这些是如何通过这些库实例化查询和样式化组件的示例，以举例说明有关此语法的问题
Tagged template literals?
Backticks calling a function || What is the usage of the backtick symbol (`) in JavaScript?（其中提到了标记的模板文字，但在第一个答案中没有）

标签： javascript ecmascript-6 graphql styled-components template-literals

【解决方案1】：

模板文字有一个称为标记模板的附加功能。这就是开始反引号之前的前缀。前缀实际上是一个函数的名称 - 该函数被传递模板字符串的常量部分和插值（${} 部分中的内容），并且可以将生成的字符串处理成它想要的任何内容（尽管通常是另一个字符串，不一定）。

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

【讨论】：

“函数被传递给模板字符串的常量部分”——这是什么意思？
这是模板字符串中不在${} 块中的部分。阅读我链接到的页面，它包含所有详细信息。

【解决方案2】：

这些是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)

【讨论】：