Шаблонні рядки в JavaScript

Що таке шаблонні літерали?

Шаблонні літерали (template strings) — це літерали рядків, що містяться в зворотних лапках (`), які підтримують вбудовані вирази, багаторядкові рядки та позначені шаблони. Введені в ES6.

Основний синтаксис

javascript

const name = "Alice";
const greeting = \`Hello, \${name}!\`;
console.log(greeting); // "Hello, Alice!"

Інтерполяція виразів

javascript

const a = 10, b = 20;
console.log(\`Sum: \${a + b}\`);            // "Sum: 30"
console.log(\`Type: \${typeof a}\`);          // "Type: number"
console.log(\`Upper: \${"hello".toUpperCase()}\`); // "Upper: HELLO"
console.log(\`Ternary: \${a > 5 ? "big" : "small"}\`); // "Ternary: big"

Багаторядкові рядки

javascript

// ❌ Старий спосіб
const old = "line 1\n" +
            "line 2\n" +
            "line 3";

// ✅ Шаблонний літерал
const modern = \`line 1
line 2
line 3\`;

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

javascript

const items = ["apple", "banana", "cherry"];
const html = \`
  <ul>
    \${items.map(item => \`<li>\${item}</li>\`).join("")}
  </ul>
\`;

Позначені шаблони

Позначений шаблон — це функція, яка обробляє шаблонний літерал:

javascript

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] !== undefined ? \`<b>\${values[i]}</b>\` : "";
    return result + str + value;
  }, "");
}

const name = "Alice";
const age = 25;
const result = highlight\`Name: \${name}, Age: \${age}\`;
// "Name: <b>Alice</b>, Age: <b>25</b>"

Шаблони з позначенням у реальному світі

javascript

// CSS-in-JS (styled-components)
const Button = styled.button\`
  background: \${props => props.primary ? "blue" : "gray"};
  color: white;
  padding: 8px 16px;
\`;

// Санітизація SQL-запитів
const query = sql\`SELECT * FROM users WHERE id = \${userId}\`;

// Інтернаціоналізація
const msg = i18n\`Hello, \${name}!\`;

String.raw

String.raw — це вбудований позначений шаблон, який повертає сирий рядок без обробки послідовностей ескейпів:

javascript

String.raw\`Hello\nWorld\`;  // "Hello\nWorld" (літеральний зворотний слеш-n)
\`Hello\nWorld\`;             // "Hello
                           // World" (фактичний новий рядок)

// Корисно для регулярних виразів або шляхів до файлів
const path = String.raw\`C:\Users\Documents\file.txt\`;

Важливо:

Шаблонні літерали є стандартним способом створення рядків у сучасному JavaScript. Використовуйте їх для інтерполяції рядків, багаторядкових рядків та генерації HTML. Позначені шаблони живлять бібліотеки, такі як styled-components та GraphQL query builders.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань