Как работают шаблонные литералы JavaScript ES6

Development, Java | Amber | Комментировать запись

Спецификация 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