Template Literals چیه؟

قبلا برای نوشتن یک تک‌کوتیشن توی یک رشته‌ای که با تک‌کوتیشن نوشته شده از یک بک‌اسلش مثل زیر استفاده می‌کردیم:

var str = 'I\'m Bond, James Bond';

همین قضیه برای دابل‌کوتیشن‌ها صدق می‌کنه.

Template Literals یک راه جدید برای ساختن رشته‌ها توی جاوااسکریپت هستن که علاوه بر اینکه مشکل بالا رو حل می‌کنه یک مزیت دیگه هم داره که توی ادامه بهش اشاره می‌کنم. توی رشته‌های Template Literals بجای کوتیشن، از Backtick یا ‍` استفاده می‌کنیم. (این کارکتر روی کیبرد من بالای Tab هست).

var str = `I'm Bond, James Bond "'""'""''"`;

توی روش‌های قدیمی ساخت رشته توی جاوااسکریپت وقتی می‌خواستیم یک متغیر رو وسط یک رشته بچسبونیم، باید رشته رو قطع می‌کردیم، متغیر رو اضافه می‌کردیم و ادامه رشته رو بهش می‌چسبوندیم:

var age = 105;
var str = "He is " + age + " years old";

اما توی روش جدید و با Template Literals کافیه متغیر رو بصورت زیر اضافه کنیم:

var age = 105;
var str = `He is ${age} years old`;

داخل${...}  هر عبارتی می‌تونه قرار بگیره. مثلا:

var age = 105;

console.log(`He is ${(age * 2) + 2} years old`);

console.log(`He is ${person.getAge()} years old`);

منبع: