การแทรกค่า: {expression}
ฝังนิพจน์ JavaScript ลงในแม่แบบ HTML ของ Svelte ได้โดยตรง
การแทรกค่า: {expression} เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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 จะไม่แสดงผลใด ๆ
การเรียกฟังก์ชัน
เรียกฟังก์ชันภายในวงเล็บปีกกาได้ แต่ควรทำให้ฟังก์ชันทำงานรวดเร็ว เพราะฟังก์ชันจะทำงานซ้ำทุกครั้งที่เกิดการอัปเดตแบบรีแอกทีฟ
<p>Total: {formatCurrency(amount)}</p>ความคิดเห็น
ใช้ความคิดเห็น HTML ทั่วไป ความคิดเห็นเหล่านี้จะไม่ปรากฏในผลลัพธ์ที่เรนเดอร์
<!-- This is a comment -->ตรวจสอบความเข้าใจ
คุณจะแทรกข้อความอย่างปลอดภัยได้อย่างไร
ทบทวน
วงเล็บปีกกาคู่เดียวใช้แทรกนิพจน์ใด ๆ ในข้อความและแอตทริบิวต์ได้ พร้อมรูปแบบย่อและการกระจายเพื่อให้เขียนโค้ดได้สะดวกขึ้น
คำถามที่พบบ่อย
บทเรียน “การแทรกค่า: {expression}” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การแทรกค่า: {expression}” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การแทรกค่า: {expression}”
ฝังนิพจน์ JavaScript ลงในแม่แบบ HTML ของ Svelte ได้โดยตรง คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การแทรกค่า: {expression}” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โครงสร้างของแม่แบบ script style
- ตัวแปรตอบสนองด้วย let
- การแทรกค่า: {expression}
- ค่าที่คำนวณ: การประกาศตอบสนอง $: