الگوهای Template Literals در جاوااسکریپت
Template Literals یکی از قدرتمندترین ویژگی‌های معرفی شده در ES6 است که انقلابی در نحوه کار با رشته‌ها در جاوااسکریپت ایجاد کرده است. این ویژگی نه تنها خوانایی کد را بهبود می‌بخشد، بلکه امکانات جدیدی مانند رشته‌های چندخطی و قابلیت جایگذاری متغیرها را به سینتکس زبان اضافه می‌کند.
سینتکس پایه
برخلاف رشته‌های سنتی که با کوتیشن (' ') یا دابل کوتیشن (" ") تعریف می‌شدند، Template Literals با استفاده از بک‌تیک (` `) ایجاد می‌شوند:
const greeting = `سلام دنیا!`;
- امکان شکستن خط بدون استفاده از \n
- جایگذاری مستقیم عبارات با ${expression}
- پشتیبانی از توابع خاص به نام Tagged Templates
| ویژگی |
مثال |
| رشته چندخطی |
`خط اول
خط دوم` |
| جایگذاری متغیر |
`سلام ${name}` |
جایگذاری عبارات (Expression Interpolation)
یکی از کاربردهای اصلی Template Literals، امکان جایگذاری مستقیم متغیرها و عبارات درون رشته است:
const price = 99.99;
const message = `قیمت محصول: ${price} تومان`;
این قابلیت برای ترکیب مقادیر مختلف بسیار مفید است و نیاز به استفاده از عملگر + برای الحاق رشته‌ها را از بین می‌برد. برای یادگیری عمیق‌تر می‌توانید به آموزش وارد شوید مراجعه کنید.
Tagged Templates
این الگوی پیشرفته امکان پردازش Template Literals با توابع خاص را فراهم می‌کند. تگ‌ها توابعی هستند که قبل از Template Literal قرار می‌گیرند:
- تابع تگ، آرایه‌ای از رشته‌ها و مقادیر جایگذاری شده را دریافت می‌کند
- امکان تغییر خروجی نهایی را فراهم می‌کند
- کاربرد در سیستم‌های i18n، جلوگیری از XSS و...
توجه: Template Literals در تمام مرورگرهای مدرن پشتیبانی می‌شوند، اما برای محیط‌های قدیمی ممکن است نیاز به transpiler مانند Babel باشد.
