Какова цель литералов шаблонов (обратных кавычек) после определения переменной в ES6?

В GraphQL вы можете написать что-то вроде этого для определения запроса:

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

В стилизованных компонентах вы можете определить стилизованный компонент следующим образом:

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

Что это за синтаксис? Я знаю, что с литералами шаблонов вы можете использовать переменные с этим синтаксисом: ${foo} но я никогда не видел, чтобы это использовалось. Любое руководство будет оценено.

Ответ 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)

Ответ 2

Шаблонные литералы имеют дополнительную функцию, называемую теговыми шаблонами. Вот что такое префикс перед открывающим обратным тылом. Префикс на самом деле является именем функции - функции передаются константные части строк шаблона и интерполированные значения (вещи в секциях ${}), и они могут обрабатывать полученную строку как угодно (хотя обычно это другая строка, не должно быть).

Смотрите эту страницу на MDN для более подробной информации о том, как работают теговые шаблоны.