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

วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat

สร้างวันที่ อ่านส่วนต่าง ๆ จัดรูปแบบตามท้องถิ่น และแสดงเวลาในเขตเวลาอื่นด้วย Intl.DateTimeFormat

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

บทนำเกี่ยวกับวันที่

เป้าหมาย: สร้างและจัดรูปแบบวันที่อย่างปลอดภัย

  • new Date()
  • การอ่านส่วนต่าง ๆ
  • การจัดรูปแบบตามภาษาท้องถิ่น
  • เขตเวลาอื่น
วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat — ภาพประกอบ 1

การสร้างค่า Date

สร้างด้วย new Date() การประทับเวลา หรือส่วนปี/เดือน/วันแบบง่าย ๆ โดยดัชนีเดือนเริ่มที่ 0

// Create Date instances
// Now (current time)
const now = new Date();

// From timestamp (milliseconds since Jan 1, 1970 UTC)
const fromMs = new Date(0);

// From parts: year, monthIndex (0=Jan), day
const xmas = new Date(2025, 11, 25);

console.log("Now:", now.toString());
console.log("Epoch:", fromMs.toUTCString());
console.log("Xmas:", xmas.toDateString());
วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat — ภาพประกอบ 2

เมธอดดึงค่าส่วนต่าง ๆ

ใช้เมธอดดึงค่า เช่น getFullYear, getMonth, getDate และ getHours

// Read parts with getters
const d = new Date(2025, 0, 2, 15, 30);

console.log("Year:", d.getFullYear());
console.log("Month (0=Jan):", d.getMonth());
console.log("Day of month:", d.getDate());
console.log("Hours:", d.getHours());
console.log("Minutes:", d.getMinutes());
วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat — ภาพประกอบ 3

ISO และยุคเวลา

toISOStringจะให้สตริง UTC ที่คงที่ ส่วน getTimeจะส่งคืนจำนวนมิลลิวินาทีตั้งแต่ยุคเวลา

// ISO string and timestamps
const sample = new Date();

console.log("ISO:", sample.toISOString());
console.log("Unix seconds (approx):", Math.floor(sample.getTime() / 1000));
วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat — ภาพประกอบ 4

การจัดรูปแบบตามภาษาท้องถิ่น

ใช้ Intl.DateTimeFormat เพื่อสร้างผลลัพธ์ที่ชัดเจนและสอดคล้องกับภาษาท้องถิ่น โดยมีตัวเลือกสำหรับส่วนต่าง ๆ

// Format for a locale
const date = new Date(2025, 6, 4, 9, 5);

// Simple: toLocaleString uses your environment defaults
console.log("Local:", date.toLocaleString());

// Intl.DateTimeFormat with explicit locale and options
const fmt = new Intl.DateTimeFormat("en-GB", {
  year: "numeric",
  month: "short",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit"
});

console.log("Formatted:", fmt.format(date));
วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat — ภาพประกอบ 5

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

เลือก timeZone เพื่อดูช่วงเวลาเดียวกันในภูมิภาคต่าง ๆ โดยไม่ต้องคำนวณเอง

// Format for a different time zone
const meeting = new Date(Date.UTC(2025, 3, 10, 12, 0));

const ny = new Intl.DateTimeFormat("en-US", {
  timeZone: "America/New_York",
  dateStyle: "medium",
  timeStyle: "short"
});

const tokyo = new Intl.DateTimeFormat("en-US", {
  timeZone: "Asia/Tokyo",
  dateStyle: "medium",
  timeStyle: "short"
});

console.log("NY:", ny.format(meeting));
console.log("Tokyo:", tokyo.format(meeting));
วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat — ภาพประกอบ 6

แบบทดสอบ Intl.DateTimeFormat

ตรวจสอบอย่างรวดเร็ว: การจัดรูปแบบตามภาษาท้องถิ่นและเขตเวลา

วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat — ภาพประกอบ 7

สรุป

สรุป: คุณได้สร้างวันที่ อ่านส่วนต่าง ๆ แสดงผล ISO จัดรูปแบบตามภาษาท้องถิ่น และแสดงเขตเวลาอื่นด้วย Intl.DateTimeFormat

วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat — ภาพประกอบ 8

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

บทเรียน “วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat”

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

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

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

บทเรียน “วันที่ — พื้นฐาน เขตเวลา และ Intl.DateTimeFormat” ใช้เวลานานแค่ไหน

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

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

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

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

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