javascriptTemplate literalرشتهٔ قالبی در جاوااسکریپت
رشتهٔ قالبی در جاوااسکریپت، متن و مقدارها را با بک‌تیک و ${expression} ترکیب می‌کند؛ مثال رسید خرید، محاسبه در متن و تفاوت با کوتیشن معمولی.
مفهوم به زبان ساده
برای ساخت پیامی مانند «۲ کالا، مجموع ۱۶۰۰۰۰ تومان»، باید متن ثابت و نتیجهٔ محاسبه را کنار هم قرار دهید. Template Literal این کار را با بک‌تیک، یعنی نویسهٔ `، و جای‌نگهدار ${expression} انجام می‌دهد. عبارت داخل جای‌نگهدار محاسبه می‌شود و نتیجه در متن قرار می‌گیرد. این شیوه با کوتیشن تکی یا دوتایی معمولی فرق دارد.
در مثال، quantity و unitPrice همچنان عدد هستند. جمع‌بندی آن‌ها در message به متن تبدیل می‌شود تا بتوان آن را نمایش داد. مدل داده را با متن نمایشی اشتباه نگیرید: برای محاسبهٔ بعدی از همان عددها استفاده کنید، نه از رشته‌ای که «تومان» به آن افزوده‌اید. متن قالبی می‌تواند چندخطی باشد؛ خط جدیدی که واقعاً در قالب می‌نویسید، جزئی از رشتهٔ خروجی خواهد شد.
جای‌نگهدار فقط مخصوص نام متغیر نیست و یک عبارت مانند quantity * unitPrice را هم می‌پذیرد. برای خوانایی، محاسبه‌های طولانی را پیش از ساخت پیام نام‌گذاری کنید. این ابزار به‌خودی‌خود متن را برای درج در HTML ایمن نمی‌کند. وقتی متن از کاربر می‌آید و باید روی صفحه نمایش داده شود، ویژگی textContent در #dom راه مناسبی برای درج متن است. در تمرین، تعداد را تغییر دهید و ببینید پیام تازه چگونه از دادهٔ عددی ساخته می‌شود.
کجا به کار می‌آید؟
- ساخت پیام تأیید، رسید خرید و گزارش متنی
- ترکیب چند مقدار در یک پیام بدون زنجیرهٔ طولانی علامت +
از تعریف تا یک مثال واقعی
const quantity = 2;
const unitPrice = 80000;
const message = `${quantity} کالا، مجموع ${quantity * unitPrice} تومان`;
console.log(message);
console.log('مجموع ${quantity * unitPrice} تومان');
2 کالا، مجموع 160000 تومان
مجموع ${quantity * unitPrice} توماناین مثال چطور کار می‌کند؟
دو متغیر عددی دادهٔ خرید را نگه می‌دارند.
بک‌تیک باعث می‌شود عبارت‌های داخل ${...} در قالب معمولی محاسبه شوند.
ضرب تعداد در قیمت واحد، متن مجموع را می‌سازد.
رشتهٔ خط آخر با کوتیشن تکی نوشته شده؛ جای‌نگهدار آن عیناً چاپ می‌شود.
اشتباه رایج
کوتیشن تکی و دوتایی، ${...} را جای‌گذاری نمی‌کنند. همچنین Template Literal ورودی کاربر را پاک‌سازی یا به HTML امن تبدیل نمی‌کند؛ رشتهٔ قالبی را بی‌بررسی به innerHTML ندهید.
این را به خاطر بسپارید
برای ترکیب متن و نتیجهٔ عبارت، بک‌تیک و ${...} را به کار ببرید؛ مقدار اصلی داده را جدا نگه دارید.