قالب‌های متنی
قالب متنی رشته‌ای است که با backtick ساخته می‌شود. با ${...} می‌توانی مقدار JavaScript را درون آن قرار بدهی. مثال‌های این درس با سفارش guest و drink کار می‌کنند.
درون‌گذاری مقدار
هر عبارتی که داخل ${...} باشد هنگام اجرای برنامه ارزیابی می‌شود و نتیجه‌اش داخل متن قرار می‌گیرد.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"] };
const label = `${order.guest} ordered ${order.drink}`;
console.log(label);
خروجی lida ordered tea است. متن بیرون از ${...} ثابت می‌ماند.
ارزیابی عبارت‌ها
داخل ${...} می‌توانی property یا یک عبارت کامل بنویسی؛ مثلاً تعداد اعضای آرایه یا نتیجهٔ یک متد.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"] };
const summary = `${order.extras.length} extras: ${order.extras.join(", ")}`;
console.log(summary);
این کد 2 extras: mint, lemon را چاپ می‌کند. extras: متن معمولی است و دو بخش داخل ${...} از روی داده ساخته می‌شوند.
حفظ شکست خط
اگر بین backtickها خط جدید بنویسی، همان خط جدید بخشی از رشتهٔ نهایی می‌شود.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"] };
const note = `Guest: ${order.guest}
Drink: ${order.drink}`;
console.log(note);
note دو خط دارد: Guest: lida و Drink: tea.
tag چه می‌کند؟
tag تابعی است که متن‌های ثابت و مقدارهای ارزیابی‌شده را جداگانه دریافت می‌کند.
function upper(strings, ...values) {
return strings.reduce((out, text, i) => out + text + (values[i] ?? "").toUpperCase(), "");
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"] };
const tagged = upper`Guest: ${order.guest}.`;
console.log(tagged);
خروجی Guest: LIDA. است. تابع upper مقدار مهمان را بزرگ می‌کند و متن ثابت را هم نگه می‌دارد.
نمایش در صفحه
در این دمو نام مهمان، نوشیدنی و تعداد مخلفات در یک رشته قرار می‌گیرند.
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"] };
document.getElementById("result").textContent =
`${order.guest} ordered ${order.drink} / ${order.extras.length} extras`;
</script>
خروجی دقیقاً lida ordered tea / 2 extras است.
برای نوشتن backtick در متن از \`` استفاده کن. اگر${باید متن معمولی بماند، آن را به شکل\${order.guest}` بنویس.
جدول زیر نقش بخش‌های مختلف قالب متنی را جدا می‌کند: متن ثابت کپی می‌شود، عبارت ارزیابی می‌شود و شکست خط حفظ می‌شود.
📊 اجزای قالب متنی
| بخش | نقش | نمونه |
|---|---|---|
| backtick | آغاز و پایان قالب | ` text ` |
| متن ثابت | بدون تغییر وارد نتیجه می‌شود | ordered |
${expression} |
در زمان اجرا محاسبه می‌شود | ${order.guest} |
| شکست خط | در رشتهٔ نهایی باقی می‌ماند | خط جدید بین دو متن |
تمرین
drink را به coffee تغییر بده و با ${order.extras.join(", ")} یک توضیح تازه بساز. بعد یک متن دوخطی بنویس.
اشتباه‌های رایج
برای درون‌گذاری از کوتیشن معمولی استفاده نکن. جفت ${ و } را کامل نگه دار و متن بیرون از آن‌ها را با کد اشتباه نگیر.
جمع‌بندی
backtick مرز قالب متنی است؛ ${...} مقدار را هنگام اجرا وارد می‌کند؛ شکست خطی که داخل قالب نوشته شود در نتیجه حفظ می‌شود.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود