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

การจัดรูปแบบวันที่

แสดงวันที่ด้วยตัวเลือกของ toLocaleDateString

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

การจัดรูปแบบวันที่

JavaScript มีเมธอดที่มีมาให้ในตัวหลายรายการสำหรับแปลงวันที่เป็นข้อความที่อ่านง่าย ตั้งแต่ผลลัพธ์ตามภูมิภาคไปจนถึงข้อความ ISO มาตรฐาน

const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString())

toISOString

toISOString ส่งคืนข้อความมาตรฐานตามเวลา UTC เหมาะสำหรับจัดเก็บและแลกเปลี่ยนข้อมูล เพราะไม่มีความกำกวม

const d = new Date(Date.UTC(2024, 0, 15, 10, 30, 0))
console.log(d.toISOString())

การตัดข้อความ ISO

ข้อความ ISO วางวันที่ไว้ก่อน คุณจึงตัดเอาเฉพาะอักขระสิบตัวแรกเพื่อให้เหลือเพียงวันที่ตามปฏิทินได้

const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))

toLocaleDateString

toLocaleDateString จัดรูปแบบส่วนวันที่โดยใช้ภูมิภาค ทำให้ได้ผลลัพธ์ที่เหมาะกับแต่ละภูมิภาค

const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { timeZone: "UTC" })
console.log(typeof text)

อาร์กิวเมนต์ภูมิภาค

อาร์กิวเมนต์ตัวแรกคือแท็กภูมิภาค เช่น en-US หรือ de-DE ซึ่งจะเปลี่ยนลำดับและตัวคั่นของวันที่ที่จัดรูปแบบแล้ว

const d = new Date(Date.UTC(2024, 0, 15))
const us = d.toLocaleDateString("en-US", { timeZone: "UTC" })
const iso = d.toISOString().slice(0, 10)
console.log(typeof us, iso)

ตัวเลือกการจัดรูปแบบ

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

const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", timeZone: "UTC" })
console.log(typeof text)

toLocaleTimeString

toLocaleTimeString จัดรูปแบบเฉพาะส่วนเวลา โดยยังคงเคารพภูมิภาคและตัวเลือกที่คุณระบุ

const d = new Date(Date.UTC(2024, 0, 15, 14, 5, 0))
const text = d.toLocaleTimeString("en-US", { timeZone: "UTC" })
console.log(typeof text)

toLocaleString

toLocaleString รวมทั้งวันที่และเวลาเป็นข้อความเดียวตามภูมิภาค

const d = new Date(Date.UTC(2024, 0, 15, 9, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)

toDateString

toDateString ให้วันที่ภาษาอังกฤษที่อ่านง่ายและมีรูปแบบตายตัว โดยไม่มีตัวเลือกภูมิภาค เหมาะสำหรับการบันทึกข้อมูลอย่างรวดเร็ว

const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof d.toDateString())

Intl.DateTimeFormat

สำหรับการจัดรูปแบบซ้ำ ๆ Intl.DateTimeFormat จะสร้างออบเจ็กต์ตัวจัดรูปแบบที่นำกลับมาใช้ซ้ำได้ ซึ่งมีประสิทธิภาพกว่าการเรียกใช้เมธอดตามภูมิภาคหลายครั้ง

const fmt = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", dateStyle: "medium" })
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof fmt.format(d))

การเลือกรูปแบบ

ใช้ข้อความ ISO สำหรับการจัดเก็บและส่วนติดต่อการเขียนโปรแกรม และใช้เมธอดตามภูมิภาคสำหรับแสดงผลแก่ผู้ใช้ในภูมิภาคของตน ควรแยกหน้าที่ทั้งสองส่วนนี้ออกจากกัน

const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการจัดรูปแบบ

สรุปทบทวน

สรุปทบทวน: เลือกเมธอดจัดรูปแบบให้เหมาะกับงาน

  • ใช้ toISOString สำหรับการจัดเก็บและส่วนติดต่อการเขียนโปรแกรม
  • ใช้ toLocaleDateString และเมธอดที่เกี่ยวข้องสำหรับแสดงผลแก่ผู้ใช้
  • ตัวเลือกควบคุมชื่อเดือนและรูปแบบตัวเลข
  • Intl.DateTimeFormat มีประสิทธิภาพสำหรับการจัดรูปแบบซ้ำ ๆ
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))

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

บทเรียน “การจัดรูปแบบวันที่” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การจัดรูปแบบวันที่”

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

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

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

บทเรียน “การจัดรูปแบบวันที่” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การสร้างและอ่านวันที่
  2. การประทับเวลาและการคำนวณวันที่
  3. การจัดรูปแบบวันที่
  4. เขตเวลาและ UTC
← กลับไปที่ JavaScript Academy