ข้อความหลายบรรทัด
เขียนข้อความหลายบรรทัดให้อ่านง่ายโดยไม่ต้องใช้อักขระหลีก
ข้อความหลายบรรทัด เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
วิธีแบบเดิม
ก่อนจะมีลิเทอรัลแม่แบบ สตริงหลายบรรทัดต้องใช้ลำดับหลบสำหรับการขึ้นบรรทัดใหม่อย่างชัดเจน หรือต่อสตริงข้ามบรรทัด วิธีนี้มีรายละเอียดมากและทำให้เกิดข้อผิดพลาดได้ง่าย
const old = "Line 1\nLine 2\nLine 3"
console.log(old)ลิเทอรัลแม่แบบครอบคลุมหลายบรรทัด
ลิเทอรัลแม่แบบที่เขียนด้วยเครื่องหมายย้อนกลับสามารถมีการขึ้นบรรทัดใหม่จริงในโค้ดต้นฉบับได้ ทุกครั้งที่คุณกดขึ้นบรรทัดใหม่จะกลายเป็นการขึ้นบรรทัดใหม่ในสตริง
ตัวอย่างที่เรียกใช้งานได้จะแสดงผลลัพธ์เดียวกันโดยใช้ลำดับหลบ
const text = "First\nSecond\nThird"
console.log(text)คงช่องว่างไว้
การเยื้องและช่องว่างภายในแม่แบบหลายบรรทัดจะถูกเก็บไว้ตรงตามที่เขียนทุกประการ ซึ่งสำคัญเมื่อสร้างผลลัพธ์ที่จัดรูปแบบไว้
const block = " indented\n more indented"
console.log(block)สร้างย่อหน้า
สตริงหลายบรรทัดมีประโยชน์สำหรับย่อหน้าข้อความ เนื้อหาอีเมล หรือแม่แบบ ในที่นี้เราจะประกอบข้อความสั้น ๆ
const msg = "Dear user,\n\nThank you for joining.\n\nBest regards"
console.log(msg)นับจำนวนบรรทัด
คุณสามารถแยกสตริงหลายบรรทัดด้วยอักขระขึ้นบรรทัดใหม่ เพื่อนับหรือประมวลผลแต่ละบรรทัด
const text = "a\nb\nc\nd"
const lines = text.split("\n")
console.log("Lines: " + lines.length)รวมเป็นสตริงหลายบรรทัด
คุณสามารถใช้ตัวคั่นเป็นอักขระขึ้นบรรทัดใหม่เพื่อรวมอาร์เรย์ของบรรทัดให้เป็นสตริงหลายบรรทัดโดยใช้โค้ด
const parts = ["one", "two", "three"]
console.log(parts.join("\n"))ใช้ร่วมกับการแทรกค่า
แม่แบบหลายบรรทัดสามารถมีช่องแทนค่าได้เช่นกัน ทำให้ผสมค่าที่เปลี่ยนแปลงกับการขึ้นบรรทัดใหม่ได้ ตัวอย่างนี้ใช้การต่อข้อความเพื่อแสดงผลลัพธ์
const name = "Sam"
const body = "Hello " + name + ",\nWelcome aboard."
console.log(body)แท็บและอักขระพิเศษ
คุณสามารถใส่อักขระแท็บด้วยลำดับหลบสำหรับแท็บ แม้จะอยู่ภายในสตริงหลายบรรทัด เพื่อจัดแนวคอลัมน์
const table = "Name\tAge\nAlice\t30\nBob\t25"
console.log(table)ตัดบรรทัดส่วนเกิน
บางครั้งสตริงหลายบรรทัดมีบรรทัดว่างอยู่ด้านหน้าหรือด้านท้าย เมธอด trim จะลบช่องว่างโดยรอบ รวมถึงอักขระขึ้นบรรทัดใหม่
const raw = "\n\nHello\n\n"
console.log("[" + raw.trim() + "]")สร้างข้อความโค้ด
สตริงหลายบรรทัดมีประโยชน์สำหรับส่งออกส่วนย่อยของโค้ดต้นฉบับหรือการตั้งค่าเป็นผลลัพธ์ข้อความ
const code = "function add(a, b) {\n return a + b\n}"
console.log(code)ใส่ใจความยาวบรรทัด
โปรดจำไว้ว่าแม่แบบหลายบรรทัดจะรวมการขึ้นบรรทัดใหม่ทุกครั้งที่คุณพิมพ์ การขึ้นบรรทัดใหม่โดยไม่ตั้งใจอาจทำให้เกิดช่องว่างที่ไม่คาดคิด ดังนั้นควรจัดรูปแบบอย่างมีเจตนา
const a = "no break here and here"
console.log(a.length)ตรวจสอบอย่างรวดเร็ว
ทดสอบความเข้าใจเรื่องหลายบรรทัดของคุณ
ทบทวน
ทบทวน: ลิเทอรัลแม่แบบช่วยให้มีข้อความหลายบรรทัดจริงได้
- การขึ้นบรรทัดใหม่ในโค้ดต้นฉบับจะกลายเป็นการขึ้นบรรทัดใหม่ในสตริง
- ช่องว่างจะถูกเก็บไว้ตรงตามเดิม
- ใช้ร่วมกับการแทรกค่าเพื่อสร้างส่วนข้อมูลที่เปลี่ยนแปลงได้
- ใช้ split และ join เพื่อประมวลผลบรรทัด
console.log("Line A\nLine B")คำถามที่พบบ่อย
บทเรียน “ข้อความหลายบรรทัด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ข้อความหลายบรรทัด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ข้อความหลายบรรทัด”
เขียนข้อความหลายบรรทัดให้อ่านง่ายโดยไม่ต้องใช้อักขระหลีก คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ข้อความหลายบรรทัด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ