9- آموزش جاوااسکریپت | کار با Template Literals (رشته‌های قالب)

در جاوااسکریپت، به ویژه هنگام ایجاد محتوای HTML به صورت داینامیک، مدیریت رشته‌ها با روش‌های قدیمی (Concatenation) بسیار دشوار و مستعد خطاست. در این آموزش، با قابلیت Template Literals آشنا می‌شویم که استاندارد مدرن برای این کار است.

---

چرا روش‌های قدیمی دشوار بودند؟

در نسخه ES5، برای ترکیب متغیرها و کدهای HTML، باید از عملگر + استفاده می‌کردیم که خوانایی کد را به‌شدت کاهش می‌داد و مدیریت فاصله‌ها و شکستن خطوط در آن بسیار آزاردهنده بود:

// روش قدیمی (ES5)
const name = 'John';
const age = 30;
let html = '<ul>' +
           '<li>Name: ' + name + '</li>' +
           '<li>Age: ' + age + '</li>' +
           '</ul>';

معرفی Template Literals

در استاندارد ES6، ویژگی جدیدی به نام Template Literals معرفی شد. با استفاده از بک‌تیک (`) به‌جای کوتیشن‌های معمولی (' یا ")، می‌توانیم از قابلیت‌های قدرتمندتری استفاده کنیم.

۱. جایگذاری متغیرها (Interpolation)

به جای بستن رشته با کوتیشن و استفاده از عملگر + برای الحاق متغیر، از نحو ${} استفاده می‌کنیم:

const name = 'John';
const age = 30;

// استفاده از Template Literals
let html = `
    <ul>
        <li>Name: ${name}</li>
        <li>Age: ${age}</li>
    </ul>
`;

۲. رشته‌های چندخطی

یکی از بزرگ‌ترین مزایای Template Literals، پشتیبانی از رشته‌های چندخطی است. شما می‌توانید مستقیماً و بدون نیاز به کاراکترهای کنترلی (\n) یا اتصال‌های زنجیره‌ای، متن خود را در چندین خط بنویسید.

۳. استفاده از عبارات و توابع

درون ${} شما محدود به متغیرها نیستید. می‌توانید هر نوع عبارت جاوااسکریپتی (JavaScript Expression)، توابع یا عملگرهای منطقی را قرار دهید:

const age = 31;

// استفاده از عملگر سه تایی (Ternary Operator)
let status = `${age > 30 ? 'Over 30' : 'Under 30'}`;

// اجرای یک تابع
function hello() { return 'Hello World'; }
let output = `${hello()}`;

// محاسبات ریاضی
let math = `${2 + 2}`; // خروجی: 4

---

جمع‌بندی

در این بخش آموختیم:

• استفاده از بک‌تیک (`) برای تعریف Template Literals.
• نحوه تزریق متغیرها با استفاده از نحو ${variable}.
• مزایای استفاده از رشته‌های چندخطی برای کدهای خواناتر (مخصوصاً در تولید HTML).
• توانایی اجرای عبارات، توابع و منطق‌های ساده مستقیماً داخل رشته‌ها.

استفاده از این روش باعث می‌شود کدهای شما تمیزتر، قابل‌نگهداری‌تر و حرفه‌ای‌تر شود. در آموزش بعدی، به سراغ آرایه‌ها (Arrays) و متدهای کار با آن‌ها می‌رویم.