У JavaScript шаблонні рядки дають змогу вбудовувати вирази в рядки тексту (англ. string); це ще називають інтерполяцією рядків.
Ця функціональність розширює можливості вбудованого глобального обʼєкта String.
Ми можемо створювати шаблонні рядки в JavaScript, узявши текст у зворотні лапки. Вони дозволяють не лише додавати в текст нові рядки та інші спеціальні символи, а й вбудовувати змінні та інші вирази.
const num1 = 1;
const num2 = 2;
`Adding ${num1} and ${num2} gives ${num1 + num2}.`;
// => Adding 1 and 2 gives 3.
У наведеному вище прикладі зворотні лапки (``) позначають шаблонний рядок. ${...} - це заповнювач, який використовують для підстановки.
Будь-які типи, що не є рядками тексту, неявно перетворюються на рядки тексту.
Цю тему розглянуто в концепції перетворення типів.
З шаблонними рядками можна використовувати всі типи виразів.
const track = 'JavaScript';
`This track on exercism.org is ${track.toUpperCase()}.`;
// => This track on exercism.org is JAVASCRIPT.
Коли нам потрібно, щоб рядок тексту був розбитий на кілька рядків:
`This is an example of using template
strings to accomplish multiple
lines`;
Завдяки наявним можливостям підстановки ми можемо також додати в цей процес логіку, щоб визначити, яким має бути вихідний рядок тексту.
Приклад цього - вбудовування тернарного оператора.
Цей оператор - коротка форма запису інструкції if/else.
Синтаксис такий: condition ? consequent-expression : alternative-expression.
Якщо умова правдива, повертається операнд ліворуч від двокрапки.
Інакше результатом тернарного виразу буде операнд праворуч від двокрапки.
const grade = 95;
`You have ${grade > 90 ? 'passed' : 'failed'} the exam.`;
// => You have passed the exam.
У цій вправі ми будемо писати код, який допоможе компанії з виготовлення вивісок створювати написи на замовлення для своїх вивісок.
Реалізуйте функцію buildSign(occasion, name), яка приймає рядок тексту (англ. string) як параметр occasion і рядок тексту з чиїмось іменем як параметр name.
Обидва параметри буде вбудовано в шаблонний рядок, щоб вивести напис на вивісці.
buildSign('Birthday', 'Rob');
// => "Happy Birthday Rob!"
Реалізуйте функцію buildBirthdaySign(age), яка приймає вік і залежно від нього визначає частину напису на вивісці.
Якщо вік 50 або більше, користувача на вивісці буде названо mature, інакше його буде названо young.
Точний очікуваний вивід показано нижче:
buildBirthdaySign(50);
// => "Happy Birthday! What a mature fellow you are."
buildBirthdaySign(45);
// => "Happy Birthday! What a young fellow you are."
Реалізуйте функцію graduationFor(name, year), яка приймає імʼя як рядок тексту, а рік як число, і за допомогою інтерполяції рядків створює фразу для вивіски, у якій символ нового рядка розділяє два рядки повідомлення.
graduationFor('Hannah', 2022);
/* => "Congratulations Hannah!
Class of 2022"
*/
Реалізуйте функцію costOf(sign, currency), яка приймає рядок тексту з вмістом вивіски та рядок тексту, що позначає валюту.
Базова ціна вивіски становить 20 у заданій валюті. Крім того, кожна літера коштує 2. (Пробіли теж враховуються в розрахунку.)
Повернута фраза містить вартість створення вивіски, записану з двома цифрами після десяткової коми, а далі йде рядок тексту з валютою.
costOf('Happy Birthday Rob!', 'dollars');
// => "Your sign costs 58.00 dollars."
Зареєструйтеся на Exercism, щоб вивчати й опановувати JavaScript, а також 37 концепцій159 вправ та справжнє наставництво від людей, і все це безкоштовно.