Какова цель шаблонных литералов (обратных кавычек) после функции в ES6?
В GraphQL вы можете написать что-то вроде этого, чтобы определить запрос:
const USER_QUERY = gql`
{
user(id: 2) {
name
}
}
`
В стилизованных компонентах вы можете определить стилизованный компонент следующим образом:
const Button = styled.button`
background-color: papayawhip;
`
Что это за синтаксис? Я знаю, что с помощью шаблонных литералов вы можете подставлять переменные с таким синтаксисом: ${foo}, но я никогда не видел, чтобы это использовалось. Любое руководство будет оценено.
это примеры того, как запросы и стилизованные компоненты могут быть созданы через эти библиотеки, чтобы проиллюстрировать вопрос по этому синтаксису.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
У шаблонных литералов есть дополнительная функция, называемая шаблонами с тегами. Вот что такое префикс перед открывающей обратной кавычкой. Префикс на самом деле является именем функции - функции передаются постоянные части строк шаблона и интерполированные значения (материал в секциях ${}), и она может преобразовать полученную строку во все, что захочет (хотя обычно это другая строка, не не должно быть).
См. эта страница на MDN для более подробной информации о том, как работают шаблоны с тегами.
«функции передаются постоянные части строки шаблона» - что это значит?
Это части строки шаблона, которых нет в блоках ${}. Прочтите страницу, на которую я ссылаюсь, там есть все подробности.
Это тегированные литералы шаблона. Часть перед рюкзаками - это ссылка на функцию, которая будет вызываться для обработки строки.
В функцию передаются переменные (части ${}) в качестве аргументов, а также части строки, которые окружают переменные, разбитые на массив. Возвращаемое значение функции становится значением шаблона. Из-за этого очень обобщенного формата вы можете делать с функцией практически все, что угодно. Вот быстрый и грязный пример, в котором переменные (для удобства собраны в массив), переводятся в верхний регистр и возвращаются в строку:
function upperV(strings, ...vars) {
/* make vars uppercase */
console.info("vars: ", vars) // an array of the passed in variables
console.info("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.info(output)
Откуда взялся этот пример?