Какова цель литералов шаблонов (обратных кавычек) после определения переменной в 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 для получения дополнительной информации о том, как работают теговые шаблоны.