رشته های قالبی (Template Strings) (ES6 Template Strings)

در ES6، رشته های قالبی (Template Strings) کمک می کنند متن های طولانی را راحت بنویسی. با رشته های قالبی ES6 می توانی چند خط متن، متغیرها و حتی عبارت های حسابی را خیلی تمیز داخل یک رشته قرار بدهی.

رشته های قالبی ES6 چیست؟

رشته های قالبی ES6 نوع خاصی از رشته هستند که با بک تیک (`) نوشته می شوند، نه با " یا '. این رشته ها می توانند چند خطی باشند و داخلشان از ساختار ${} برای چسباندن متغیرها و عبارت ها استفاده می کنیم. در ری اکت هم برای ساخت متن های پویا خیلی به درد می خورند.

مقایسه حالت قدیمی با رشته های قالبی

اول نسخه قدیمی را ببینیم که با عملگر + و کاراکتر \n رشته می ساخت. این روش زود شلوغ می شود و خواندنش سخت است، مخصوصا وقتی متن چند خطی باشد.

مثال: ساخت رشته چند خطی به روش قدیمی

const name = "John";
const age = 30;
const message = "Hello, " + name + "!\n" +
"You are " + age + " years old.";

مشاهده در ادیتور

در این کد برای رفتن به خط بعدی از \n استفاده شده است. همچنین باید مدام رشته ها و متغیرها را با + به هم بچسبانی که هم وقت گیر است و هم احتمال خطا را بالا می برد.

همان مثال با رشته های قالبی ES6

حالا همان پیام را با رشته های قالبی ES6 می نویسیم. این بار متن خواناتر می شود و متغیرها مستقیم داخل رشته قرار می گیرند.

const name = "John";
const age = 30;
const message = `Hello, ${name}!
You are ${age} years old.`;

مشاهده در ادیتور

اینجا دیگر از \n خبری نیست. خود رفتن به خط بعد در متن ذخیره می شود. متغیرها هم با ${name} و ${age} مستقیم داخل رشته قرار گرفته اند.

رشته های قالبی چند خطی و دقت به فاصله ها

یکی از قدرت های رشته های قالبی ES6 این است که به راحتی متن چند خطی می سازند. مثلا می توانی یک تکه HTML را داخل یک رشته نگه داری.

مثال: نگه داشتن ساختار HTML در یک رشته

const html = `
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
`;

مشاهده در ادیتور

این ساختار برای زمانی خوب است که می خواهی یک قطعه HTML یا یک متن قالبی طولانی را در یک متغیر نگه داری. اما باید حواست باشد که فاصله ها و تورفتگی ها نیز بخشی از رشته می شوند.

مثال: تأثیر تورفتگی روی رشته نهایی

const x = `
  John:
    Hello, how are you?
  Jane:
    I'm fine, thanks!
`;

مشاهده در ادیتور

همه فاصله ها و خط های خالی در خروجی باقی می مانند. پس اگر ظاهر دقیق متن مهم است، تورفتگی را با دقت تنظیم کن.

جای گذاری متغیرها و عبارت ها داخل رشته های قالبی

در رشته های قالبی ES6 می توانی متغیر یا هر عبارت جاوااسکریپتی را داخل ${} قرار بدهی. این کار باعث می شود متن خروجی خیلی پویا و قابل فهم شود.

مثال: جای گذاری متغیرها

let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

مشاهده در ادیتور

اینجا دو متغیر firstName و lastName داریم. با استفاده از ${firstName} و ${lastName} آنها را مستقیم وسط متن قرار داده ایم.

مثال: استفاده از عبارت ها داخل رشته

let price = 10;
let quantity = 5;

let total = `Total: ${price * quantity}`;

مشاهده در ادیتور

در این نمونه فقط متغیر نگذاشته ایم، بلکه یک عبارت هم نوشته ایم. عبارت price * quantity حساب می شود و نتیجه در متن قرار می گیرد.

مثال: استفاده از map داخل رشته قالبی

const items = ["apple", "banana", "orange"];
const list = `You have ${items.length} items:
${items.map((item) => `- ${item}`).join('\n')}`;

مشاهده در ادیتور

در اینجا از متد map برای ساختن لیست استفاده شده است. متن نهایی شامل تعداد آیتم ها و یک لیست خط به خط از نام هر میوه است.

مثال: ترکیب رشته های قالبی و عملگر سه تایی

const isAdmin = true;
const message = `Status: ${isAdmin ? "Admin" : "User"}`;

مشاهده در ادیتور

اینجا از عملگر سه تایی برای انتخاب متن استفاده شده است. اگر isAdmin true باشد، متن "Admin" نمایش داده می شود؛ در غیر این صورت "User" قرار می گیرد.

رشته های قالبی برچسب دار (Tagged Templates)

در سطح پیشرفته تر، می توانی رشته های قالبی را به یک تابع بدهی. به این حالت Tagged Template می گویند. تابع می تواند رشته و مقدارهای داخل ${} را دریافت و خروجی دلخواه را بسازد.

مثال: تابع highlight با یک نام

function highlight(strings, fname) {
  let x = fname.toUpperCase();
  return strings[0] + x + strings[1];
}

let name = "John";

let text = highlight`Hello ${name}, how are you?`;

مشاهده در ادیتور

در این مثال، تابع highlight متن و مقدار name را می گیرد. سپس نام را با حروف بزرگ برمی گرداند و دوباره کنار بقیه متن می گذارد.

مثال: Tagged Template با چند عبارت

function highlight(strings, fname1, fname2) {
  let x = fname1.toUpperCase();
  let y = fname2.toUpperCase();
  return strings[0] + x + strings[1] + y + strings[2];
}

let name1 = "John";
let name2 = "Jane";

let text = highlight`Hello ${name1} and ${name2}, how are you?`;

مشاهده در ادیتور

تابع highlight این بار دو نام می گیرد. رشته های بین آنها در آرایه strings می آید و نام ها در fname1 و fname2 قرار می گیرند.

مثال: Tagged Template با rest parameter

function highlight(strings, ...fname) {
  let x = fname[0].toUpperCase();
  let y = fname[1].toUpperCase();
  return strings[0] + x + strings[1] + y + strings[2];
}

let name1 = "John";
let name2 = "Jane";

let text = highlight`Hello ${name1} and ${name2}, how are you?`;

مشاهده در ادیتور

در این نسخه، همه نام ها در آرایه fname جمع می شوند. سپس می توانیم روی آن حلقه بزنیم یا با اندیس ها کار کنیم. این قابلیت برای تعداد متغیرهای نامشخص مفید است.

تمرین گام به گام با رشته های قالبی ES6

برای اینکه رشته های قالبی ES6 را خوب درک کنی، این سه قدم را انجام بده.

1. یک متغیر برای نام و یک متغیر برای سن بساز و پیام را با روش قدیمی و + بنویس.
2. همان پیام را با رشته های قالبی ES6 و ${} بازنویسی کن.
3. یک متغیر بولی مثل isDarkMode بساز و با عملگر سه تایی در یک رشته قالبی، وضعیت «حالت تیره» را چاپ کن.

اگر خواستی بیشتر درباره عملگر سه تایی بدانـی، صفحه عملگر سه تایی (Ternary) (ES6 Ternary Operator) در همین آموزش ری اکت کمک بزرگی است.

همچنین برای درک بهتر استفاده از map داخل رشته ها، می توانی صفحه متد map روی آرایه ها (ES6 Array map()) را هم ببینی. آن جا منطق map را کامل تر می بینی.

در نهایت اگر می خواهی ببینی این رشته های قالبی چطور در JSX کنار تگ ها استفاده می شوند، سری به صفحه آموزش JSX در ری اکت بزن. آن جا مثال های عملی تر داخل کامپوننت ها را خواهی دید.

جمع بندی سریع

• رشته های قالبی ES6 با بک تیک (`) نوشته می شوند.
• با ${} می توانی متغیرها و عبارت ها را داخل متن قرار دهی.
• می توانند چند خطی باشند و \n لازم ندارند.
• برای متن های پویا در ری اکت و JSX عالی هستند.
• Tagged Template ها برای کارهای پیشرفته و خاص استفاده می شوند.