Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Template Literals

Template Literals

Frontend SELF UA
Рівень 37 , Лекція 2
Відкрита

3.1 Вкладені вирази

У шаблонних літералах можна використовувати будь-які вирази, включаючи виклики функцій, тернарні оператори і шаблонні літерали всередині шаблонних літералів.

Приклад:

У виразі ${a + b} виконується математична операція, і результат вставляється в рядок result.

JavaScript 
    
      const a = 5;
      const b = 10;

      const result = `The result of ${a} + ${b} is ${a + b}.`;
      console.log(result); // "The result of 5 + 10 is 15."

3.2 Вкладені шаблонні літерали

Шаблонні літерали можуть бути вкладені, що дозволяє створювати складні рядки.

Telegram

Приклад:

Виклик методу greet() об’єкта user вкладений у шаблонний літерал message.

JavaScript 
    
      const user = {
        name: 'Bob',
        age: 25,
        greet() {
          return `Hello, ${this.name}!`;
        }
      };

      const message = `${user.greet()} You are ${user.age} years old.`;

      console.log(message); // "Hello, Bob! You are 25 years old."

3.3 Теговані шаблонні літерали (Tagged Templates)

Теговані шаблонні літерали дозволяють викликати функцію для обробки шаблонних рядків. Це дає можливість виконувати додаткові маніпуляції з рядками, такі як інтернаціоналізація, безпечна вставка HTML тощо.

Синтаксис:

    
      function tag(strings, ...values) {
        // обробка рядків і значень
        return результат;
      }

      const result = tag`Шаблонний рядок з ${змінна}`;

Приклад:

Функція highlight() обробляє рядки і значення, обгортаючи значення в HTML-теги <span> з класом highlight.

JavaScript 
    
      function highlight(strings, ...values) {
        return strings.reduce((result, str, i) =>
          `${result}${str}${values[i] || ''}`, '');
      }

      const name = 'Carol';
      const hobby = 'painting';
      const message = highlight`My name is ${name} and I love ${hobby}.`;

      console.log(message);
      // "My name is <span class="highlight">Carol</span> and I love <span class="highlight">painting</span>."

3.4 Безпечна вставка значень

Шаблонні літерали допомагають уникнути деяких поширених проблем із безпекою, таких як XSS (міжсайтовий скриптинг), шляхом безпечної вставки значень. Це особливо корисно при вставці даних користувача в HTML.

Приклад:

Функція safeHTML() замінює небезпечні символи в значеннях, запобігаючи XSS-атакам.

JavaScript 
    
      function safeHTML(strings, ...values) {
        return strings.reduce((result, str, i) =>
          `${result}${str}${String(values[i]).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}`, '');
      }

      const userInput = '<script>alert("XSS")</script>';
      const message = safeHTML`User input: ${userInput}`;

      console.log(message);
      // "User input: &lt;script&gt;alert("XSS")&lt;/script&gt;"
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ