Modern JS Cheatsheet / Памятка по современному JavaScript: Шаблонные строки с тегами

### Шаблонные строки с тегами

a_popova 05.10.17 в 14:57

Шаблонные теги - это *функции, которые могут быть приставкой к [шаблонной строке](#template-literals)*. Когда функция вызывается таким образом, первый параметр представляет собой массив *строк*, которые появляются между интерполированными переменными, а последующие параметры являются интерполированными значениями. Используйте оператор расширения `...`, чтобы захватить их все. [(Ссылка: MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals).

a_popova 05.10.17 в 14:59

> **Примечание :** Известная библиотека, которая называется [стилизованные компоненты](https://www.styled-components.com/), основана на этой возможности.

a_popova 05.10.17 в 15:00

Ниже приведен пример их работы.

a_popova 05.10.17 в 15:00

```js
function highlight(strings, ...values) {
const interpolation = strings.reduce((prev, next) => {
return prev + next + (values.shift() || "");
}, "");
return `<mark>${interpolation}</mark>`;
}
const condiment = "jam";
const meal = "toast";
highlight`I like ${condiment} on ${meal}.`;
// "<mark>I like jam on toast.</mark>"
```

a_popova 05.10.17 в 15:00

Более интересный пример:

a_popova 05.10.17 в 15:00

```js
function comma(strings, ...values) {
return strings.reduce((prev, next) => {
let value = values.shift() || [];
value = value.join(", ");
return prev + next + value;
}, "");
}
const snacks = ['apples', 'bananas', 'cherries'];
comma`I like ${snacks} to snack on.`;
// "I like apples, bananas, cherries to snack on."
```

a_popova 05.10.17 в 15:00

#### Внешние ресурсы

a_popova 05.10.17 в 15:01

- [Wes Bos по методу шаблонных строк с тегами](http://wesbos.com/tagged-template-literals/)
- [Библиотека общих шаблонных тегов](https://github.com/declandewet/common-tags)

a_popova 05.10.17 в 15:01