У цьому посібнику ви дізнаєтесь про літературні шаблони JavaScript (рядки шаблонів) за допомогою прикладів.
Шаблонні літерали (рядки шаблонів) дозволяють використовувати рядки або вбудовані вирази у вигляді рядка. Вони укладені зворотними мітками ``. Наприклад,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Примітка : Шаблонний літерал був введений у 2015 році (також відомий як ECMAScript 6 або ES6 або ECMAScript 2015). Деякі браузери можуть не підтримувати використання літералів шаблонів. Відвідайте підтримку шаблону JavaScript Literal, щоб дізнатися більше.
Шаблонні літерали для рядків
У попередніх версіях JavaScript ви б використовували одинарну лапку ''або подвійну лапку ""для рядків. Наприклад,
const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error
Щоб використовувати однакові лапки всередині рядка, ви можете використовувати символ втечі .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Замість використання символів екранування ви можете використовувати літерали шаблонів. Наприклад,
const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;
Як бачите, літерали шаблонів не тільки полегшують включення цитат, але і роблять наш код вигляд чистішим.
Багаторядкові рядки з використанням шаблонів літералів
Шаблонні літерали також полегшують запис багаторядкових рядків. Наприклад,
Використовуючи шаблонні літерали, ви можете замінити
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
з
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Результат роботи обох цих програм буде однаковим.
Це довге повідомлення, яке охоплює кілька рядків у коді.
Інтерполяція виразу
До JavaScript ES6 ви б використовували +оператор для об'єднання змінних та виразів у рядок. Наприклад,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
З літералами шаблонів дещо простіше включати змінні та вирази всередину рядка. Для цього ми використовуємо $(… )синтаксис.
const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)
Вихідні дані
Привіт Джек Сума 4 + 5 - 9 Дуже висока
Процес призначення змінних та виразів всередині літералу шаблону відомий як інтерполяція.
Позначені шаблони
Зазвичай ви використовуєте функцію для передачі аргументів. Наприклад,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Однак ви можете створювати теговані шаблони (які поводяться як функція), використовуючи літерали шаблонів. Ви використовуєте теги, які дозволяють аналізувати літеральні шаблони за допомогою функції.
Позначений шаблон пишеться як визначення функції. Однак ви не передаєте дужки ()під час виклику літералу. Наприклад,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Вихідні дані
("Привіт Джек")
Масив рядкових значень передається як перший аргумент функції тегу. Ви також можете передати значення та вирази як інші аргументи. Наприклад,
const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);
Вихідні дані
Привіт Джеку, як справи?
Таким чином, ви також можете передати кілька аргументів у позначеній темі шаблону.
