درک Template Literalها در جاوا اسکریپت (راهنمای جامع)

در نسخه سال ۲۰۱۵ استاندارد اکمااسکریپت (ES6)، ویژگی جدیدی به نام Template Literal به زبان جاوا اسکریپت اضافه شد. قالب‌های متنی (Template Literals) شیوه جدید و بسیار قدرتمندی برای ساخت رشته‌ها (String) در جاوا اسکریپت ارائه می‌دهند؛ از جمله ساخت آسان‌تر رشته‌های چندخطی (Multi-line) و استفاده از Placeholderها برای قرار دادن مستقیم متغیرها و عبارات درون یک رشته.

علاوه بر این، ویژگی پیشرفته‌تری به نام Tagged Template Literals به شما اجازه می‌دهد تا عملیات خاصی را روی عبارات درون یک رشته انجام دهید. تمام این قابلیت‌ها، دست شما را برای کار با رشته‌ها بازتر می‌کنند؛ چه بخواهید URLهای پویا بسازید و چه توابعی برای سفارشی‌سازی المان‌های HTML بنویسید.

در این مقاله از وبلاگ پارمین کلود، تفاوت‌های بین رشته‌های عادی (تک‌کوتیشن و دابل‌کوتیشن) و Template Literalها را بررسی می‌کنیم، روش‌های مختلف تعریف رشته‌ها را مرور خواهیم کرد و در نهایت به سراغ Tagged Templateها و نمونه‌های واقعی استفاده از آن‌ها در پروژه‌ها می‌رویم.

۱. نحوه تعریف رشته‌ها در جاوا اسکریپت

برای شروع، نگاهی به روش‌های سنتی تعریف رشته با تک‌کوتیشن (' ') و دابل‌کوتیشن (" ") می‌اندازیم و سپس همین کار را با Template Literalها انجام می‌دهیم.

در جاوا اسکریپت می‌توانید یک رشته را با تک‌کوتیشن بنویسید:

const single = 'هر روز یک روز خوب برای کدزدنه.';

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

const double = "کدها باید خوانا و تمیز باشند.";

برعکس برخی از زبان‌های برنامه‌نویسی دیگر، در جاوا اسکریپت تفاوت ساختاری متفاوتی بین تک‌کوتیشن و دابل‌کوتیشن وجود ندارد. استفاده از هرکدام بیشتر به سلیقه شخصی یا استانداردهای تیم شما بستگی دارد. تنها نکته این است که اگر از تک‌کوتیشن استفاده می‌کنید و داخل متن هم کاراکتر تک‌کوتیشن دارید، باید آن را اسکیپ (Escape) کنید:

// اسکیپ کردن تک‌کوتیشن در رشته‌ای که با تک‌کوتیشن تعریف شده
const single = '"We don\'t make mistakes. We just have happy accidents." - Bob Ross';

// اسکیپ کردن دابل‌کوتیشن در رشته‌ای که با دابل‌کوتیشن تعریف شده
const double = "\"We don't make mistakes. We just have happy accidents.\" - Bob Ross";

console.log(single);
console.log(double);

خروجی هر دو دستور console.log کاملاً یکسان خواهد بود:

"We don't make mistakes. We just have happy accidents." - Bob Ross
"We don't make mistakes. We just have happy accidents." - Bob Ross

استفاده از Template Literals

در مقابل، Template Literalها با کاراکتر بک‌تیک (Backtick) یا همان Grave Accent (`) تعریف می‌شوند:

const template = `آزادی را روی این بوم پیدا کن.`;

بزرگ‌ترین مزیت در گام اول این است که نیازی به اسکیپ کردن تک‌کوتیشن یا دابل‌کوتیشن ندارید:

const template = `"We don't make mistakes. We just have happy accidents." - Bob Ross`;

البته اگر بخواهید خود کاراکتر بک‌تیک را درون رشته استفاده کنید، باید آن را اسکیپ کنید:

const template = `برای Template Literalها از کاراکتر \` استفاده می‌شود.`;

یک پیشنهاد برای استاندارد کدنویسی:

با اینکه Template Literalها می‌توانند جایگزین تمام رشته‌های عادی شوند، اما بر اساس کنوانسیون رایج در برنامه‌نویسی، بهتر است از Template Literal فقط زمانی استفاده کنید که به قابلیت‌های خاص آن (مثل متغیرهای پویا یا متن چندخطی) نیاز دارید. برای رشته‌های ساده، استفاده منظم از ' ' یا " " خوانایی کد شما را بالاتر می‌برد.

۲. رشته‌های چندخطی (Multi-line Strings)

قبل از ES6، اگر می‌خواستید متنی بنویسید که در چند خط ادامه داشته باشد، کار کمی دردسرآفرین بود.

اگر از عملگر الحاق (+) استفاده می‌کردید:

const address = 
  'Homer J. Simpson' + 
  '742 Evergreen Terrace' + 
  'Springfield';

این کار کد شما را در ادیتور چندخطی می‌کرد، اما در خروجی هیچ خط جدید یا فاصله‌ای ایجاد نمی‌شد:

Homer J. Simpson742 Evergreen TerraceSpringfield

اگر از بک‌اسلش (\) استفاده می‌کردید:

const address =
  'Homer J. Simpson\
  742 Evergreen Terrace\
  Springfield';

فاصله‌های ابتدای خط حفظ می‌شد، اما باز هم خروجی در یک خط قرار می‌گرفت:

Homer J. Simpson  742 Evergreen Terrace  Springfield

برای ایجاد یک رشته چندخطی واقعی، مجبور بودید از کاراکتر خط جدید (\n) استفاده کنید:

const address = 
  'Homer J. Simpson\n' + 
  '742 Evergreen Terrace\n' + 
  'Springfield';

خروجی:

Homer J. Simpson
742 Evergreen Terrace
Springfield

روش مدرن با Template Literals

با Template Literalها دیگر نیازی به الحاق، \n یا بک‌اسلش ندارید. کافیست کلید ENTER را بزنید و متن را در چند خط بنویسید:

const address = `Homer J. Simpson
742 Evergreen Terrace
Springfield`;

خروجی دقیقاً مانند متن ورودی خواهد بود:

Homer J. Simpson
742 Evergreen Terrace
Springfield

توجه: هرگونه تورفتگی (Indent) یا فاصله در کد، عیناً به خروجی منتقل می‌شود. بنابراین اگر کد زیر را بنویسید:

const address = `Homer J. Simpson
                 742 Evergreen Terrace
                 Springfield`;

خروجی شما هم دارای همان فواصل اضافی خواهد بود:

Homer J. Simpson
                 742 Evergreen Terrace
                 Springfield

۳. جای‌گذاری عبارات (Expression Interpolation)

پیش از ES6 برای ساخت رشته‌های پویا و ترکیب متغیرها از عملگر + استفاده می‌شد:

const method = 'concatenation';
const dynamicString = 'This string is using ' + method + '.';

با Template Literalها می‌توانید عبارات و متغیرها را داخل یک Placeholder به صورت ${} قرار دهید. هر چیزی که داخل {} قرار گیرد به عنوان کد جاوا اسکریپت پردازش می‌شود و خارج از آن به عنوان رشته عادی تلقی می‌گردد:

const method = 'interpolation';
const dynamicString = `This string is using ${method}.`;

خروجی:

This string is using interpolation.

مثال کاربردی: ساخت آدرس‌های URL پویا

یکی از کاربردهای رایج این قابلیت، ساخت URLهای پویا است. مقایسه کنید:

روش قدیمی:

function createOAuthString(host, clientId, scope) {
  return host + '/login/oauth/authorize?client_id=' + clientId + '&scope=' + scope;
}

روش مدرن با Template Literals:

function createOAuthString(host, clientId, scope) {
  return `${host}/login/oauth/authorize?client_id=${clientId}&scope=${scope}`;
}

console.log(createOAuthString('https://github.com', 'abc123', 'repo,user'));

خروجی:

https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

اجرای متدها و محاسبات درون Template Literal

شما می‌توانید متدها، محاسبات ریاضی و حتی عملگرهای شرطی (Ternary) را درون ${} بگذارید:

// استفاده از متد trim برای حذف فواصل اضافی
const menuItem = (url, link) =>
  `
<li>
  <a href="${url}">${link}</a>
</li>
`.trim();

console.log(menuItem('https://parmincloud.ir', 'Parmin Cloud'));

خروجی:

<li>
  <a href="https://parmincloud.ir">Parmin Cloud</a>
</li>

محاسبات ریاضی و توابع:

const sum = (x, y) => x + y;
const x = 5;
const y = 100;

console.log(`The sum of ${x} and ${y} is ${sum(x, y)}.`);
// خروجی: The sum of 5 and 100 is 105.

شرط‌های سه‌تایی (Ternary Operators):

const age = 19;
const message = `You can ${age < 21 ? 'not' : ''} view this page`;

console.log(message);
// خروجی: You can not view this page

۴. بررسی Tagged Template Literals (تگ‌های قالبی)

یکی از قابلیت‌های پیشرفته Template Literalها، Tagged Templates است. این ویژگی به شما اجازه می‌دهد رشته را به یک تابع (Tag Function) بسپارید تا روی قسمت‌های مختلف آن (متن‌ها و متغیرها) پردازش انجام دهد.

برای ساخت یک Tag Function، ورودی اول تابع برابر با آرایه‌ای از بخش‌های متنی (Strings) و ورودی‌های بعدی (با استفاده از Rest Parameters) برابر با متغیرهای پاس داده شده خواهند بود:

function tag(strings, ...expressions) {
  console.log(strings);
  console.log(expressions);
}

const string = tag`This is a string with ${true} and ${false} and ${100} interpolated inside.`;

خروجی کنسول:

(4) ["This is a string with ", " and ", " and ", " interpolated inside."]
(3) [true, false, 100]

• آرایه strings شامل بخش‌های متنی ثابت است.

• آرایه expressions شامل تمام مقادیری است که درون ${} قرار گرفته‌اند.

همچنین از طریق strings.raw می‌توانید به نسخه دست‌نخورده (Raw) رشته‌ها دسترسی داشته باشید؛ جایی که کاراکترهای اسکیپ‌شده مانند \n پردازش نمی‌شوند.

مثال واقعی: برجسته‌سازی متغیرها در HTML

فرض کنید می‌خواهید توابعی بسازید که تمامی متغیرهای داخل متن را به‌صورت خودکار درون تگ <strong> بپوشاند:

function bold(strings, ...expressions) {
  let finalString = '';

  // پیمایش عبارات و ترکیب آن‌ها با بخش‌های متنی
  expressions.forEach((value, i) => {
    finalString += `${strings[i]}<strong>${value}</strong>`;
  });

  // افزودن آخرین بخش متنی
  finalString += strings[strings.length - 1];

  return finalString;
}

const string = bold`This is a string with ${true} and ${false} and ${100} interpolated inside.`;

console.log(string);

خروجی:

This is a string with <strong>true</strong> and <strong>false</strong> and <strong>100</strong> interpolated inside.

استفاده از Tagged Templates در کتابخانه‌های محبوب

این ویژگی در کتابخانه‌های بزرگ جاوا اسکریپت کاربرد فراوانی دارد:

1. GraphQL: کتابخانه graphql-tag از gql برای تبدیل رشته‌های پرس‌وجو به ساختار AST استفاده می‌کند.

2. Styled Components: در ری‌اکت (React) برای استایل‌دهی به المان‌های DOM از این قابلیت بهره می‌برند.

همچنین می‌توانید از متد قدرتمند خود جاوا اسکریپت به نام String.raw استفاده کنید تا جلوی پردازش کاراکترهای اسکیپ را بگیرید:

const rawString = String.raw`I want to write \n without it being escaped.`;
console.log(rawString);
// خروجی: I want to write \n without it being escaped.

جمع‌بندی

در این مقاله با ساختار کلی Template Literalها، نحوه کار با رشته‌های چندخطی، ساخت آدرس‌ها و متن‌های پویا با جای‌گذاری متغیرها و در نهایت مفاهیم پیشرفته Tagged Templates آشنا شدید. استفاده از این ابزارها کد شما را در پروژه‌های مدرن وب تمیزتر، خواناتر و هوشمندتر می‌سازد.

از همراهی شما با پارمین کلود سپاسگزاریم.