Теги для шаблонных строк

В JavaScript есть, как по мне, крайне странный синтаксис. Самым очевидным его применением можно считать styled-components и выглядит всё это примерно так:

const display = 'flex';

const Button = styled.button`
    padding: 10px;
    color: red;
    display: ${display}
`

В результате выполнения этого чуда мы получим компонент на основе нативного button с предустановленными стилями из литералов

Но вы когда нибудь задумывались, что styled.button — это тоже функция? А как она вызывается? Как устроена внутри?

На самом деле, самый базовый пример такого синтаксиса можно рассмотреть так:

function foo(strings, ...values) {
    let result = strings[0];
  
    values.forEach((value, index) => {
        result += value + strings[index + 1];
    });

    return result;
}

Всё, что делает эта функция — собирает строку из шаблона и подставленных переменных

— strings — массив строк, содержащий все части текста, разделенные переменными
— values — массив значений, которые вставляются внутрь шаблона

Попробуем вызвать нашу функцию:

const name = "Денис"
const channel = "progway"

foo`Меня зовут ${name} и я люблю ${channel}`

Использование обратных кавычек после именования функции вызывает эту самую функцию

Для нашего примера, strings — это:

[
"Меня зовут ",
" и я люблю ",
""
]

а values:

[
"Денис",
"progway"
]

По такому же принципу и работает styled-components, конечно же, с более сложной логикой внутри

Этот синтаксис очень специфичный, ему не так много применений, но всё таки в некоторых случаях он бывает очень удобен. Например, в призме, с помощью такого такого синтаксиса можно кинуть запрос в БДшку

В реальной жизни вам скорее всего не понадобится писать подобные функции, но вдруг..

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #web #javascript #theory #data #code