Спецификация ECMAScript 2015 (ES6) предоставляет нам новый механизм создания строковых значений – возможность использовать шаблонные литералы для строковой интерполяции и многострочных строк. Шаблонные литералы также часто называют шаблонными строками, это одно и то же.
Шаблонный литерал умеет все то же, что и обычная строка – следовательно, обычные строки в коде можно вообще не использовать. Шаблонные литералы могут заменить их без каких-либо потерь для кода. Однако, как правило, использование шаблонных литералов ограничивается спецификациями по написанию кода: согласно этим документам, их следует применять только там, где нужны их расширенные возможности.
Для объявления шаблонных литералов в JavaScript есть специальный символ – это обратные кавычки (`). На большинстве клавиатур этот символ можно поставить при помощи клавиши, которая находится справа от клавиши 1.
Давайте рассмотрим такой пример строковой интерполяции с помощью шаблонных литералов:
function greeting(firstName, lastName) { let message = `Hello ${firstName} ${lastName}`; return message; }
А в этом случае шаблонный литерал используется с многострочной строкой:
console.log(`Right now is the perfect time to learn JavaScript`);
Вот еще один пример – строковая интерполяция и многострочные строки с шаблонными литералами:
var user = { name: "Joe", email: "joe@example.com" }; var item = { quantity: 3, price: 4.99 }; var message = `Name: ${user.name} Email: ${user.email} Total price: ${item.quantity * item.price}`;
Вышеприведенный пример кода выведет в консоль следующее сообщение:
Name: Joe Email: joe@example.com ----- Total price: 14.97
Как видите, шаблонные литералы способны значительно упростить все, что связано с обработкой строк. Кроме того, у шаблонных литералов есть продвинутые возможности – теговые шаблоны, о которых мы поговорим в следующем руководстве по JavaScript.
Читайте также: Теговые шаблоны в JavaScript ES2015