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

Пам'ятаєте, як жахливо виглядає код в JS, коли потрібно розмістити кілька змінних в рядку? Безліч разів потрібно написати лапки ' ' а потім ще і знак +. І все це лише для того, щоб запустити код і зрозуміти, що ви не правильно вставили змінні або забули закрити лапки в кінці. Ну що ж, ви ще не користуєтесь шаблонними літералами?

Шаблоні літерали – це звичайні рядки, які дозволяють використовувати вирази. Якщо вам це здається не зрозумілим – нічого, скоро це мине. Є кілька проблем, з якими ми зустрічаємося при роботі з рядками. Можливо, нам буде потрібно інтерполювати рядок або вбудовувати вирази чи використовувати багато рядків в одному. Все це можна зробити, використовуючи JavaScript до ES6. Але є спосіб, як зробити все елегантно і на багато простіше. Про це і буде йтися в цій статі. Перш за все, ось основна інформація, яку ми повинні знати перед тим, як використовувати шаблоні літерали.

1. Шаблоні літерали – ще один спосіб запису рядків, які використовують зворотні лапки ` ` замість звичайних ' ' або подвійних лапок " ". До ES6 вони називалися шаблоні строки.
2. Щоб вставити вираз (плейсхолдер) у шаблонний літерал, ми додаємо їх у знак долара та фігурні дужки, подібні до цього ${expression}.
3. Якщо функція не вказана, все що знаходиться в зворотних лапках передається в функцію за замовчування, яка об'єднує все в один рядок.

Інтерполяція рядків

Це проблема про яку ми згадували на початку статті. Нагадаємо собі про цей жах.

let name = "Darth Vader";
let job = "Developer";
let tools = "JavaScript and CSS";
console.log("My name is " + name + " and I am a " + job + ". I write " + tools + "." );//My name is Darth Vader and I am a Developer. I write JavaScript and CSS."

Використовуючи шаблоні літерали ES6, ми можемо зробити ось так.

 let name = "Darth Vader";
 let job = "Developer";
 let tools = "JavaScript and CSS";
 console.log(`My name is ${name} and I am a ${job} . I write ${tools}.`); //My name is Darth Vader and I am a Developer. I write JavaScript and CSS."

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

Вбудуймо математичний вираз, використовуючи шаблоні літерали.

console.log(`Luke Skywalker has ${5+3} cats and ${3+2} dogs.`)//"Luke Skywalker has 8 cats and 5 dogs."

Ми також можемо вставити функцію.

let sayHello = () => "Hello";
 console.log(`${sayHello()}, it's the code girl next door.`);//"Hello, it's the code girl next door."

І тепер все разом.

let sayName = () => "Template Literal";
let num = 5;
console.log(`I am a ${sayName()} and I am ${num *2}x more powerful.`);//"I am a Template Literal and I am 10x more powerful."

Багато рядків в одному

Пам'ятаєте, для чого використовується \ в рядках? Якщо ви подумали про перехід на новий рядок... ви маєте рацію. Якщо ви подумали, що це єдиний спосіб перейти на новий рядок... ви неправі. Шаблонні літерали дозволяють перейти до нового рядка, буквально переходячи на новий рядок, не використовуючи жодного символу. Отже, замість цього:

console.log("I am the first line \
, I am the second line \
 And I am the third line.");

Можемо зробити так:

 console.log(`I am the first line,
 I am the second line
 And I am the third line.`);

І результат буде однаковий.

"I am the first line,
I am the second line
And I am the third line."

Дуже круто!

Давайте на прикладі побачимо, де все це може бути корисним. Ми хочемо додати розмітку HTML до сторінки за допомогою Javascript. Шаблонні літерали дозволяють зробити це дуже акуратно і просто.

const animal = {
        kind: "Monkey",
        food: "bananas", 
        hobby: "jumping trees"
    };
		
   const display = `
        <div class = "animal">
            <h1>Hey, this is a ${animal.kind}</h1>
            <p>It eats ${animal.food} and loves ${animal.hobby}</p>
        </div>
    `;
    document.body.innerHTML = display;

Подивіться, як легко та акуратно це можна зробити за допомогою шаблонних літералів. Круто, чи не так?