سلام دوستان جاوااسکریپتی! توی قسمت قبل با رشته‌ها آشنا شدیم و دیدیم که چطوری می‌تونیم با علامت‌های ' و " رشته‌هایی رو بسازیم. این دو روش علاوه‌بر اینکه شباهت‌های زیادی به هم داشتن، محدودیت‌هایی هم داشتن که جاوااسکریپت رو به فکر معرفی کردن یک روش جدید برای ساختن رشته‌ها انداخت. این روش جدید که با عنوان Template Literals شناخته میشه رو توی این قسمت بررسی می‌کنیم 😉

توی این قسمت کوتاه یاد می‌گیریم که:

بریم که سومین روش ساختن رشته‌ها رو بررسی کنیم.

 

ساختن رشته به روش Template Literals

این رشته‌ها رو با کارکتر ` می‌سازیم که روی کیبرد معمولاً دکمه بالای Tab هست:

const message = `Hello`;
// or
alert(`Hello`);

به این کارکتر ` به اصطلاح گفته میشه Backtick Character.

توی قسمت قبل دیدیم که رشته‌هایی که با علامت‌های ' و " درست می‌شدن شامل محدودیت‌هایی بودن. مثلاً نمی‌تونستیم بین یک رشته متغیری رو نمایش بدیم و یا رشته‌های چندخطی داشته باشیم. برای حل این مشکل‌ها باید رشته رو قطع می‌کردیم. اما دیگه چنین محدودیت‌هایی رو توی رشته‌های Template Literals نداریم 👋

اگه رشته‌هامون رو با علامت Backtick یا ` می‌سازیم، دیگه نیازی به قطع کردن رشته نیست. کافیه متغیر رو به صورت زیر اضافه کنیم به رشته:

const name = "Emily";

const message = <<`Welcome to our app, ${name}`>>;

alert(message);

توی این رشته‌ها وقتی جاوااسکریپت به قسمت ${...} می‌رسه، تصور می‌کنه که چیزی برای پردازش و ارزیابی وجود داره. پس هر چیزی که داخل {} بنویسیم، توسط جاوااسکریپت پردازش میشه و خروجی اون داخل رشته قرار می‌گیره:

const year = 2021;
const birth = 2010;

const message = `Emily is ${year - birth} years old`;

alert(message);

همچنین خیلی راحت می‌تونیم رشته‌های چندخطی داشته باشیم:

const message = `Hello Emily!
My name is Mario.
Welcome to our app.
Start using it! Get help`;

alert(message);