Что такое шаблонные литералы и для чего они используются?

Шаблонные литералы (template literals), также известные как шаблонные строки, это синтаксический сахар в JavaScript, позволяющий встраивать выражения в строки с использованием обратных кавычек (``).

Они используются для:

1. Более удобной интерполяции переменных и выражений в строки:

   const name = "Мир";
   const greeting = `Привет, ${name}!`; // Встраивание переменной
   console.log(greeting); // Привет, Мир!
   
   const sum = 2 + 3;
   const result = `Сумма: ${sum}.`; // Встраивание выражения
   console.log(result); // Сумма: 5.
   

2. Создания многострочных строк без использования символа переноса строки (\n):

   const multilineString = `
   Это
   многострочная
   строка.
   `;
   console.log(multilineString);
   

3. Построения сложных строковых выражений, таких как пути к файлам или SQL-запросы, с большей читаемостью:

   const userId = 123;
   const query = `SELECT * FROM users WHERE id = ${userId}`;
   console.log(query);
   

4. Использования помеченных шаблонов (tagged templates) для расширенного функционала: Помеченные шаблоны позволяют вызывать функцию с шаблонным литералом. Первый аргумент функции — массив строковых частей, а последующие аргументы — значения интерполированных выражений.

   function highlight(strings, ...values) {
     let str = '';
     strings.forEach((string, i) => {
       str += string;
       if (values[i]) {
         str += `<b>${values[i]}</b>`; // Например, выделение жирным
       }
     });
     return str;
   }
   
   const user = "Frontend";
   const role = "разработчик";
   const message = highlight`Привет, ${user}! Ты - ${role}.`;
   console.log(message); // Привет, <b>Frontend</b>! Ты - <b>разработчик</b>.
   

Таким образом, шаблонные литералы делают работу со строками в JavaScript более гибкой, понятной и позволяют избежать сложностей, связанных с конкатенацией строк с помощью символа +.