سلام دوستان جاوااسکریپتی! توی قسمت قبل با رشته‌ها آشنا شدیم و دیدیم که چطوری می‌تونیم با علامت‌های ' و " رشته‌هایی رو بسازیم. این دو روش علاوه‌بر اینکه شباهت‌های زیادی به هم داشتن، محدودیت‌هایی هم داشتن که جاوااسکریپت رو به فکر معرفی کردن یک روش جدید برای ساختن رشته‌ها انداخت. این روش جدید که با عنوان 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);

می‌تونیم بدون مشکل از کارکترهای ' و " توی چنین رشته‌هایی استفاده کنیم:

const message = `I'm "Emily"`;

alert(message);

 

اینها مهمترین ویژگی‌های رشته‌های Template Literals بودن. دقت کنین که این یک روش ساختن رشته‌هاست. توی نحوه استفاده از این رشته‌ها هیچ تفاوتی با رشته‌هایی که توی قسمت قبل بررسی کردیم وجود نداره. برای مثال چنین رشته‌هایی هم پراپرتی length و همچنین متدهایی مثل toUpperCase() رو در دسترسشون دارن:

const message = "Welcome!";

alert(message.toUpperCase()); // WELCOME!
alert(message.length); // 8

 

از کدوم روش ساخت رشته استفاده کنیم؟

معمولاً داشتن اختیارات بالا باعث سردرگمی میشه. ما چه زمانی باید کدوم رشته رو ترجیح بدیم؟

  1. در حالت عادی اگه رشته‌های ما پیچیدگی خاصی ندارن، رشته‌های معمولی که با کارکترهای ' و " ساخته میشن رو ترجیح بدیم
  2. هیچ تفاوتی توی استفاده از رشته‌های ' و " وجود نداره. اما بهتره توی کل برنامه فقط از یک کدوم از این علامت‌ها برای ساختن همه رشته‌ها استفاده کنیم تا انسجام و خوانایی برنامه حفظ بشه
  3. اگه شرایط خاصی وجود داره و رشته‌های پیچیده‌ای داریم، مثلاً برای نمایش یک متغیر یا به طور کلی یک عبارت وسط یک رشته و یا داشتن رشته‌های چند خطی، از Template Literals استفاده کنیم

 

خب دوستان با رشته‌های Template Literals که به اونها Template Strings و یا Backtick Syntax Strings هم گفته میشه هم آشنا شدیم و تفاوت‌های اونها با بقیه روش‌های ساخت رشته رو بررسی کردیم. برای ادامه آموزش به قسمت‌های بعدی برید. روزتون خوش 😉🖐