جاري التحميل...

القوالب النصية (Template Literals)

Template literals use backticks, evaluate ${...} at runtime, and preserve line breaks. We use { guest: "lida", drink: "tea", extras: ["mint", "lemon"] }.

ابدأ بالإدراج

${...} is evaluated at runtime and inserted into surrounding text.

Build the order label

javascript 
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"] };
const label = `${order.guest} ordered ${order.drink}`;
console.log(label);

قيّم التعبيرات

Expressions such as .length and .join(", ") are evaluated inside ${...}.

This prints 2 extras: mint, lemon; literal text and expressions have different roles.

Use properties and methods

javascript 
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"] };
const summary = `${order.extras.length} extras: ${order.extras.join(", ")}`;
console.log(summary);

The note has exactly Guest: lida and Drink: tea on separate lines.

عالج الأجزاء باستخدام tag

A tagged template receives literal strings and evaluated values.

Create a two-line note

javascript 
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"] };
const note = `Guest: ${order.guest}
Drink: ${order.drink}`;
console.log(note);

اعرض النتيجة في صفحة

The page combines the guest, drink, and extras count.

Show the result on a page

The page combines the guest, drink, and extras count.

Render the order summary

html 
<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>

The visible text is exactly lida ordered tea / 2 extras.

Use a simple tag

javascript 
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);

This lesson has the 5-code, 6-quiz, 1-table shape of spread-rest, but focuses on strings and interpolation.

This final comparison keeps the literal words separate from the evaluated order values.

Run the examples in order and compare each output with the stated fact.

The page message combines the same order object without changing its values.

📊 Template literal pieces

Part Meaning Example
Backticks Start and end the template literal ` text `
Literal text Copied into the result ordered
${expression} Evaluated at runtime and inserted ${order.guest}
Source newline Preserved in the resulting string A line break between words

Try it yourself

Change order.drink to "coffee", add ${order.extras.join(", ")}, and create a two-line note.

Common mistakes

Use backticks for interpolation, keep ${ and } paired, and remember that text outside the braces is not JavaScript.

Key point

Backticks delimit the string; ${...} inserts evaluated values; source line breaks remain in the result.

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
6
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 63 من 68
Javascript درس تعليمي