> For the complete documentation index, see [llms.txt](https://artfulbits-se.gitbook.io/typescript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://artfulbits-se.gitbook.io/typescript/future-javascript/template-strings.md).

# Template Strings

Строкові шаблони (шаблонні літерали).

Синтаксично це рядки, які використовують зворотні галочки (тобто \` ) замість одинарних (') або подвійних (") лапок. Бонусом шаблонних літералів є:

* Інтерполяція строк
* Багаторядкові строки
* Шаблони з тегами

## String Interpolation

Інтерполяція строк.

Ще один поширений випадок використання — це коли ви хочете створити деякий рядок із кількох статичних рядків + деяких змінних. Для цього вам знадобиться деяка *логіка шаблонів*, і саме звідси *строкові шаблонні* отримали свою назву. Відтоді їх було офіційно перейменовано на *літерали шаблону*. Ось як раніше можна було створити рядок html:

```ts
var lyrics = 'Never gonna give you up';
var html = '<div>' + lyrics + '</div>';
```

Зараз ви можете використати легший варіант:

```ts
var lyrics = 'Never gonna give you up';
var html = `<div>${lyrics}</div>`;
```

Зауважте, що будь-який заповнювач усередині інтерполяції (`${` і `}`) розглядається як вираз JavaScript і оцінюється як такий, наприклад. ви можете займатися дивовижною математикою.

```ts
console.log(`1 and 1 make ${1 + 1}`);
```

## Multiline Literals

Багаторядкові строки.

EВи хотіли поставити новий рядок у рядок JavaScript? Можливо, ви хотіли вставити текст? Вам потрібно було б *екранувати символ нового рядка* за допомогою нашого улюбленого символу екранування `\`, а потім вручну вставити новий рядок у рядок  у наступному рядку. Це показано нижче:

```ts
var lyrics = "Never gonna give you up \
\nNever gonna let you down";
```

В TypeScript можна просто використати template string:

```ts
var lyrics = `Never gonna give you up
Never gonna let you down`;
```

## Tagged Templates

Шаблони з тегами.

Ви можете розмістити функцію (так званий «тег») перед рядком шаблону, і вона отримає можливість попередньо обробити літерали рядка шаблону плюс значення всіх виразів-заповнювачів і повернути результат. Кілька зауважень:

* Усі статичні літерали передаються як масив для першого аргументу.
* Усі значення виразів-заповнювачів передаються як інші аргументи. Найчастіше ви просто використовуєте параметри rest, щоб також перетворити їх у масив.

Ось приклад, у якому ми маємо функцію тегу (під назвою `htmlEscape`), яка екранує html з усіх заповнювачів:

```ts
var say = "a bird in hand > two in the bush";
var html = htmlEscape `<div> I would just like to say : ${say}</div>`;

// a sample tag function
function htmlEscape(literals: TemplateStringsArray, ...placeholders: string[]) {
    let result = "";

    // interleave the literals with the placeholders
    for (let i = 0; i < placeholders.length; i++) {
        result += literals[i];
        result += placeholders[i]
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }

    // add the last literal
    result += literals[literals.length - 1];
    return result;
}
```

> Примітка. Ви можете позначити `заповнювачі` як будь-який `[]`. Що б ви не анотували, TypeScript введе перевірку, щоб переконатися, що заповнювачі, які використовуються для виклику тегу, відповідають анотації. Наприклад, якщо ви плануєте мати справу з `рядком` або `числом`, ви можете анотувати `...placeholders:(string | number)[]`

## Generated JS

Згенерований JS.

Для цілей компіляції до ES6 код досить простий. Багаторядкові рядки стають екранованими. Інтерполяція рядків стає *конкатенацією рядків*. Шаблони з тегами стають викликами функцій.

## Summary

Багаторядкові рядки та інтерполяція рядків — це просто чудові речі в будь-якій мові. Чудово, що тепер ви можете використовувати їх у своєму JavaScript (дякуючи TypeScript!). Шаблони з тегами дозволяють створювати потужні рядкові утиліти.