template-strings.md

Template Literals (Template Strings)

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

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

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

String Interpolation

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

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

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

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

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

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

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

Multiline Literals

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

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

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

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

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

Tagged Templates

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

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

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

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

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!). Шаблони з тегами дозволяють створювати потужні рядкові утиліти.