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

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

• строковая интерполяция
• многострочные литералы
• теговые шаблоны

Строковая интерполяция

Распространенный вариант использования, когда вы хотите сгенерировать строку из литералов и переменных. Для этого вам понадобится некоторая шаблонизация, и это то, откуда шаблонные строки изначально получили свое имя. С тех пор они были официально переименованы в шаблонные литералы. Вот как вы могли бы сгенерировать 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}`);

Многострочные литералы

Когда-нибудь хотели перейти на новую строку в строке JavaScript? Возможно, вы хотели вставить текст песни? Вам нужно было бы экранировать символ переноса строки, используя наш любимый escape-символ \, а затем вручную перейти на новую строку, начиная с \n. Как показано ниже:

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

С TypeScript вы можете просто использовать шаблонный литерал:

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

Теговые шаблоны

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

• Все статические литералы передаются в виде массива для первого аргумента.
• Все значения подстановочных выражений передаются как оставшиеся аргументы. Чаще всего вы просто используете параметры 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>`;

// пример теговой функции
function htmlEscape(
    literals: TemplateStringsArray,
    ...placeholders: string[]
) {
    let result = '';

    // встраиваем подстановки в литералы
    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;');
    }

    // добавляем последний литерал
    result += literals[literals.length - 1];
    return result;
}

Примечание

Вы можете указать тип placeholder как []. Независимо от того, какой тип указан, TypeScript проверяет все подстановки на соответствие типу. Например, если вы собираетесь работать с string или number, вы можете указать ...placeholders:(string | number)[]

Сгенерированный JS

При компиляции синтаксиса в код до ES6, сгенерированный js выглядит довольно просто. Многострочные строки становятся экранированными. Строковая интерполяция становится конкатенацией строк. Теговые шаблоны становятся вызовами функций.

Заключение

Многострочные строки и интерполяция строк - это отличная штука в любом языке. Здорово, что теперь вы можете использовать их в своем JavaScript (спасибо TypeScript!). Теговые шаблоны позволяют создавать мощные строковые утилиты.

Комментарии