Шаблонні літерали

JavaScriptJunior~1 хв читання

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

Шаблонний рядок - це рядок, укладений у зворотні лапки (`, не ' і не ").

javascript

const name = 'Alex';
const message = `Hello, ${name}!`;
console.log(message); // Hello, Alex!

Усередині шаблонного рядка можна вставляти змінні й вирази за допомогою ${ ... }.

1. Основна відмінність - підстановка змінних

До ES6:

javascript

const name = 'Alex';
const age = 25;
const msg = 'My name is ' + name + ' and I am ' + age + ' years old.';
console.log(msg);
// My name is Alex and I am 25 years old.

З ES6 (шаблонні рядки):

javascript

const msg = `My name is ${name} and I am ${age} years old.`;
console.log(msg);
// My name is Alex and I am 25 years old.

Код став чистішим, коротшим і зрозумілішим.

2. Можна вставляти будь-які вирази

javascript

const a = 5;
const b = 10;

console.log(`a + b = ${a + b}`); // a + b = 15
console.log(`Випадкове число: ${Math.random()}`);
console.log(`Верхній регістр: ${'js'.toUpperCase()}`);

Усе, що всередині ${ ... }, обчислюється як звичайний JS-вираз.

3. Багаторядкові рядки без \n

Раніше:

javascript

const text = 'Line 1\n' +
             'Line 2\n' +
             'Line 3';

Тепер:

javascript

const text = `
Line 1
Line 2
Line 3
`;
console.log(text);

Символ переведення рядка (\n) не потрібен - формат зберігається як є.

4. Інтерполяція з вкладеними шаблонами

Можна комбінувати шаблони і навіть використовувати їх усередині функцій:

javascript

const name = 'Alex';
const hobby = 'coding';

const greeting = `Hello, ${name}! Your hobby is ${hobby.toUpperCase()}.`;
console.log(greeting);
// Hello, Alex! Your hobby is CODING.

5. Tagged templates (просунуте використання)

Шаблонні рядки можна "тегувати" функціями для кастомної обробки:

javascript

function highlight(strings, ...values) {
  return strings.reduce(
    (result, str, i) => result + str + (values[i] ? `**${values[i]}**` : ''),
    ''
  );
}

const name = 'Alex';
const lang = 'JavaScript';
console.log(highlight`Hello ${name}, you love ${lang}!`);
// Hello **Alex**, you love **JavaScript**!

Це використовується в бібліотеках на кшталт styled-components (CSS у React), graphql-tag, і для безпечних HTML-шаблонів.

6. Порівняння зі звичайними лапками

Особливість	`'одинарні'` / `"подвійні"`	`шаблонні`
Підстановка змінних	Немає	Через `${}`
Багаторядкові рядки	Немає (потрібен `\n`)	Можна напряму
Вкладені вирази	Немає	Можна (`${x + y}`)
Тегування (функції)	Немає	Є
Символ лапки всередині	Потрібно екранувати (`\'`)	Не потрібно, якщо немає `
Підтримка ES	Старі версії	З ES6 (2015)

Коротке резюме

Що робить	Приклад	Результат
Вставка змінних	`Hello, ${name}`	`"Hello, Alex"`
Вирази	`${1 + 2}`	`"3"`
Багаторядкові рядки	`A\nB`	`"A↵B"`
Тегіровані шаблони	tag`text ${x}`	Обробляється як функція

Просте правило

Звичайні лапки - для простих рядків. Зворотні лапки - для динамічних і багаторядкових рядків.

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

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

Premium

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