JavaScript Academy · บทเรียน

พื้นฐานการแทรกข้อความ

ฝังนิพจน์ไว้ภายในลิเทอรัลแม่แบบ

พื้นฐานการแทรกข้อความ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ลิเทอรัลแม่แบบคืออะไร

ลิเทอรัลแม่แบบเป็นวิธีสร้างสตริงโดยใช้อักขระเครื่องหมายย้อนกลับแทนเครื่องหมายคำพูด วิธีนี้ช่วยให้คุณฝังนิพจน์ไว้ในสตริงได้โดยตรงโดยไม่ต้องต่อข้อความด้วยตนเอง

ช่องแทนค่าจะเขียนด้วยเครื่องหมายดอลลาร์ตามด้วยวงเล็บปีกกาที่ครอบนิพจน์ไว้ JavaScript จะประเมินนิพจน์นั้นแล้วแทรกค่าของนิพจน์ลงในสตริง

const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)

ไวยากรณ์การแทรกค่า

ภายในลิเทอรัลแม่แบบ คุณวางนิพจน์ไว้ระหว่างเครื่องหมายดอลลาร์กับวงเล็บปีกกาเปิดและวงเล็บปีกกาปิด นิพจน์จะถูกประเมินและแปลงเป็นสตริง

ตัวอย่างด้านล่างใช้การต่อข้อความแบบปกติเพื่อให้ได้ผลลัพธ์เดียวกับการแทรกค่า จึงทำให้เข้าใจแนวคิดได้โดยไม่ต้องแสดงไวยากรณ์ของลิเทอรัล

const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)

เหตุใดการแทรกค่าจึงมีประโยชน์

การต่อข้อความด้วยตัวดำเนินการบวกจะอ่านได้ยากเมื่อผสมตัวแปรและข้อความคงที่หลายรายการ การแทรกค่าช่วยคงข้อความโดยรอบไว้ และแทนที่เฉพาะส่วนที่เปลี่ยนแปลง

มีตัวดำเนินการบวกน้อยลง
ไม่มีข้อผิดพลาดเรื่องช่องว่างที่เกินมาหรือขาดหาย
เห็นเจตนาได้ชัดเจนขึ้น

const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")

ฝังนิพจน์ใดก็ได้

ช่องแทนค่าสามารถบรรจุนิพจน์ที่ถูกต้องได้ทุกชนิด ไม่ใช่แค่ตัวแปรเท่านั้น การคำนวณ การเรียกฟังก์ชัน และการเข้าถึงคุณสมบัติล้วนใช้ได้

const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))

เรียกฟังก์ชันภายใน

คุณสามารถเรียกฟังก์ชันและนำค่าที่ฟังก์ชันส่งคืนมาแทรกในสตริงได้ ตัวอย่างนี้แสดงรูปแบบการต่อข้อความที่ให้ผลเทียบเท่ากัน

function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))

การเข้าถึงคุณสมบัติ

คุณสามารถอ่านคุณสมบัติของออบเจ็กต์ได้โดยตรงภายในช่องแทนค่า ในที่นี้เราอ่านฟิลด์จากออบเจ็กต์ผู้ใช้

const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)

ตัวเลขจะกลายเป็นสตริง

เมื่อมีตัวเลขอยู่ในบริบทของสตริง ตัวเลขนั้นจะถูกแปลงเป็นรูปแบบข้อความโดยอัตโนมัติ การแปลงชนิดเดียวกันนี้เกิดขึ้นกับการแทรกค่าด้วย

const total = 19.99
console.log("Total: $" + total)

นิพจน์สามส่วนในช่องแทนค่า

ตรรกะแบบมีเงื่อนไขด้วยตัวดำเนินการสามส่วนสามารถใส่ไว้ในช่องแทนค่าได้ ทำให้คุณเลือกระหว่างค่าสองค่าได้ภายในบรรทัดเดียว

const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)

นิพจน์ซ้อนกัน

ช่องแทนค่าสามารถมีการเชื่อมเมธอดและการเรียกที่ซ้อนกันได้ ค่าที่นิพจน์ประเมินได้จะถูกแทรกลงไป

const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)

ผสมค่าหลายค่า

ลิเทอรัลแม่แบบเหมาะอย่างยิ่งเมื่อประโยคหนึ่งต้องนำตัวแปรหลายตัวมาเรียงต่อกัน เปรียบเทียบรูปแบบที่แทรกค่าและอ่านง่ายตามคำอธิบาย กับรูปแบบการต่อข้อความที่ให้ผลเทียบเท่ากันนี้

const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)

การหลีกเครื่องหมายดอลลาร์

หากต้องการให้ลำดับเครื่องหมายดอลลาร์กับวงเล็บปีกกาปรากฏเป็นข้อความตามตัวอักษรแทนที่จะเป็นช่องแทนค่า คุณต้องใช้เครื่องหมายทับขวาหลบเครื่องหมายดอลลาร์ภายในลิเทอรัลแม่แบบ แต่ในสตริงปกติไม่จำเป็นต้องใช้การหลบ

const text = "Use $\{x\} for a placeholder"
console.log(text)

ตรวจสอบอย่างรวดเร็ว

ทดสอบความเข้าใจเรื่องการแทรกค่าของคุณ

ทบทวน

ทบทวน: ลิเทอรัลแม่แบบใช้เครื่องหมายย้อนกลับและช่องแทนค่าเพื่อฝังนิพจน์ไว้ในสตริง

ช่องแทนค่าประเมินนิพจน์ใดก็ได้
ค่าต่าง ๆ จะถูกแปลงเป็นสตริง
การแทรกค่าอ่านง่ายกว่าการต่อข้อความที่ยาว
หลบเครื่องหมายดอลลาร์เมื่อต้องการแสดงเครื่องหมายนี้ตามตัวอักษร

const n = "World"
console.log("Hello, " + n + "!")

คำถามที่พบบ่อย

บทเรียน “พื้นฐานการแทรกข้อความ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐานการแทรกข้อความ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐานการแทรกข้อความ”

ฝังนิพจน์ไว้ภายในลิเทอรัลแม่แบบ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “พื้นฐานการแทรกข้อความ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy