0Pricing
JavaScript Academy · บทเรียน

ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย

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

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

บทนำ

เป้าหมาย: จัดรูปแบบข้อความด้วยลิเทอรัลแม่แบบ และใช้เมธอดสตริงพื้นฐาน จากนั้นเรียนรู้บทนำสั้น ๆ เกี่ยวกับตัวเลขและวันที่

  • ลิเทอรัลแม่แบบ
  • การดำเนินการกับสตริงทั่วไป
  • การปัดเศษอย่างปลอดภัย
  • พื้นฐานวันที่
ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย — ภาพประกอบ 1

พื้นฐานลิเทอรัลแม่แบบ

ใช้เครื่องหมายอัญประกาศย้อนกลับและ ${} เพื่อแทรกค่าลงไปโดยตรง และยังเขียนข้อความหลายบรรทัดได้ง่ายด้วย

// Template literals use backticks and ${}
// They support variables, expressions, and multi-line text
const name = "Ayla";
const score = 7;
const msg = `Hello, ${name}! Your score is ${score * 10}.`;

console.log(msg);

const lines = `Line 1
Line 2`;
console.log(lines);
ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย — ภาพประกอบ 2

สำรวจเมธอดสตริง

ฝึกใช้ length, trim, toUpperCase, includes, indexOf และ slice

// Common string methods on a small example
const title = "  JavaScript Basics  ";

console.log("Length:", title.length);
console.log("Trim:", title.trim());
console.log("Upper:", title.toUpperCase());
console.log("Includes JS:", title.includes("JavaScript"));
console.log("Index of B:", title.indexOf("B"));
console.log("Slice 2..6:", title.slice(2, 6));
ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย — ภาพประกอบ 3

การจัดรูปแบบแบบกระชับ

แม่แบบสั้นและอ่านง่ายกว่าการต่อสตริงด้วย + หลายครั้ง

// Concatenation with + versus template literals
const user = "Mina";
const points = 12;

const viaPlus = "User: " + user + ", Points: " + points;
const viaTpl = `User: ${user}, Points: ${points}`;

console.log(viaPlus);
console.log(viaTpl);
ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย — ภาพประกอบ 4

พื้นฐานการปัดเศษ

ใช้ Math.round, floor และ ceil เพื่อให้ได้จำนวนเต็ม ส่วน toFixed จะส่งคืนสตริงที่มีจำนวนตำแหน่งทศนิยมคงที่

// Numbers: integers, floats, and rounding helpers
const price = 4.35;
const qty = 3;

const total = price * qty;
console.log("Total raw:", total);

console.log("Math.round:", Math.round(total));
console.log("Math.floor:", Math.floor(total));
console.log("Math.ceil:", Math.ceil(total));

// toFixed returns a string with fixed decimals
console.log("toFixed(2):", total.toFixed(2));
ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย — ภาพประกอบ 5

สำรวจวันที่อย่างรวดเร็ว

สร้าง Date ด้วย new Date() อ่านส่วนต่าง ๆ ด้วยเมธอดดึงค่า และแสดงผลในรูปแบบมาตรฐานด้วย ISO

// Date basics: now, parts, and ISO output
const now = new Date();

console.log("Now:", now.toString());
console.log("Year:", now.getFullYear());
console.log("ISO:", now.toISOString());
ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย — ภาพประกอบ 6

แบบทดสอบลิเทอรัลแม่แบบ

ตรวจสอบอย่างรวดเร็ว: เครื่องหมายอัญประกาศย้อนกลับและ ${}

ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย — ภาพประกอบ 7

สรุป

สรุป: คุณได้ใช้ลิเทอรัลแม่แบบ ฝึกเมธอดสตริงสำคัญ ปัดเศษตัวเลขอย่างปลอดภัย และสร้างหรือแสดงผลวันที่

ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย — ภาพประกอบ 8

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

บทเรียน “ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย”

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

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

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

บทเรียน “ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ลิเทอรัลแม่แบบและการดำเนินการกับสตริงที่ใช้บ่อย
  2. ตัวเลข — จำนวนเต็มกับทศนิยมและพื้นฐาน Math
  3. วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat
← กลับไปที่ JavaScript Academy