การจัดรูปแบบวันที่
แสดงวันที่ด้วยตัวเลือกของ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้างและอ่านวันที่
- การประทับเวลาและการคำนวณวันที่
- การจัดรูปแบบวันที่
- เขตเวลาและ UTC