Публикации по теме 'tagged-template-literals'
Шаблоны с тегами и понимание синтаксиса стилизованных компонентов
Я пишу стилизованные компоненты чуть больше года, и все это время я не понимал, что происходит с синтаксисом тегированных шаблонных литералов. Этот синтаксис также популярен для GraphQL, если вы его используете. Думаю, многие похожи на меня в том, что они впервые столкнулись со следующим синтаксисом: «Что ж, это выглядит забавно, но если мне удастся написать SCSS вместо этого громоздкого объекта javascript css, давайте попробуем».
Если бы ваш ответ был больше похож на мелодию: «Как это..
Глубокое погружение в Tagged Template Literals
Шаблонные литералы в ES2015 имели большое значение. Наконец-то обезьяны JS получили возможность объявлять многострочную строку по нескольким строкам кода, не прибегая к беспорядочной конкатенации. А для форматирования строк приветственный синтаксис ${} упростил интерполяцию переменных. Этот:
["<span class=" + getElementClassName() + ">",
" " + getElementContent(),
"</span>"].join("\n")
Превратился в это:
`<span..
Литералы шаблонов с тегами — Как работают такие инструменты, как стилизованные компоненты
Вы когда-нибудь задумывались над тем, как волшебным образом работает синтаксический сахар, например styled ? Давайте воссоздадим эту функцию, используя помеченные строки шаблона в Javascript.
Если вы использовали такие инструменты, как styled-components или graphql , вы, скорее всего, сталкивались с теговыми литералами шаблонов. Новая функция Javascript, представленная в ES6.
В стилизованных компонентах шаблонные строки позволяют создавать компоненты почти волшебным образом:..