الاستيفاء: {expression}
ضمّن تعبيرات JavaScript مباشرةً في قوالب HTML الخاصة بـ Svelte
الاستيفاء: {expression} درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
صياغة الأقواس المعقوفة
ضمّن أي تعبير JavaScript في البنية بإحاطته بأقواس معقوفة.
<p>Hello {name}!</p>الرياضيات والسلاسل النصية
يمكن أن تكون التعبيرات أكثر من مجرد أسماء متغيّرات. أجرِ عمليات حسابية أو ضمّ سلاسل نصية أو استدعِ أساليب.
<p>{count + 1} items, formatted: {name.toUpperCase()}</p>إدراج التعبيرات في السمات
استخدم الصياغة نفسها داخل سمات HTML.
<img src={imageUrl} alt={altText} />السمات المختصرة
إذا كان للخاصية والمتغيّر الاسم نفسه، فاستخدم الصيغة المختصرة.
<img {src} {alt} />السمات المنطقية
بالنسبة إلى السمات المنطقية مثل disabled، مرّر أي قيمة صحيحة منطقيًا. استخدم {flag} مباشرةً.
<button disabled={isLoading}>Save</button>سمات الانتشار
انشر كائنًا من السمات على عنصر باستخدام الصياغة {...obj}.
<input {...inputProps} />النص مقابل HTML
يفلت الإدراج HTML افتراضيًا حفاظًا على الأمان. استخدم {@html ...} مع المحتوى الموثوق فقط.
<div>{@html trustedHtml}</div>التعبيرات الشرطية
تعمل التعبيرات الثلاثية داخل الأقواس المعقوفة للتفرّع البسيط.
<p>Status: {isOnline ? "online" : "offline"}</p>القيمتان null وundefined
إذا قيّم Svelte تعبيرك إلى null أو undefined، فلن يعرض شيئًا.
استدعاءات الدوال
يمكنك استدعاء الدوال داخل الأقواس المعقوفة، لكن اجعلها خفيفة. فهي تُشغَّل مجددًا عند كل تحديث تفاعلي.
<p>Total: {formatCurrency(amount)}</p>التعليقات
استخدم تعليقات HTML العادية. ولا تظهر هذه التعليقات في الناتج المعروض.
<!-- This is a comment -->تحقّق سريع
كيف تدرج نصًا بأمان؟
خلاصة
تدرج الأقواس المعقوفة المفردة أي تعبير في النص والسمات، مع توفير صيغ مختصرة وصيغة الانتشار لتسهيل الكتابة.
الأسئلة الشائعة
هل درس «الاستيفاء: {expression}» مجاني؟
نعم — نص درس «الاستيفاء: {expression}» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «الاستيفاء: {expression}»؟
ضمّن تعبيرات JavaScript مباشرةً في قوالب HTML الخاصة بـ Svelte تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «الاستيفاء: {expression}»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- بنية script وtemplate وstyle
- المتغيرات التفاعلية باستخدام let
- الاستيفاء: {expression}
- القيم المحسوبة: تصريحات $ التفاعلية