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

เขตเวลาและ UTC

จัดการ UTC และเวลาท้องถิ่นอย่างถูกต้อง

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

เวลาท้องถิ่นกับ UTC

วันที่เก็บช่วงเวลาสัมบูรณ์หนึ่งช่วงไว้ แต่สามารถอ่านได้ทั้งในเวลาท้องถิ่นหรือUTC ซึ่งเป็นเวลาอ้างอิงสากล ตัวอ่านค่ามีให้ใช้ทั้งสองรูปแบบ

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

ตัวอ่านค่า UTC

เมธอดที่ขึ้นต้นด้วย UTC เช่น getUTCFullYear และ getUTCHours จะอ่านส่วนประกอบของวันที่ในเขตเวลา UTC โดยไม่ขึ้นกับเครื่องที่ใช้งาน

const d = new Date(Date.UTC(2024, 5, 15, 8, 30, 0))
console.log(d.getUTCFullYear())
console.log(d.getUTCHours())
console.log(d.getUTCMinutes())

getTimezoneOffset

getTimezoneOffset คืนค่าความแตกต่างระหว่างเวลาท้องถิ่นกับ UTC เป็นนาที ค่าบวกหมายความว่าเวลาท้องถิ่นช้ากว่า UTC

const d = new Date()
const offset = d.getTimezoneOffset()
console.log(typeof offset)

เครื่องหมายออฟเซ็ต

เครื่องหมายออฟเซ็ตตรงข้ามกับที่หลายคนคาดไว้: เขตเวลาที่เร็วกว่า UTC จะให้ออฟเซ็ตเป็นลบ แปลงนาทีเป็นชั่วโมงโดยหารด้วย 60

const offsetMinutes = 120
const hours = offsetMinutes / 60
console.log(hours)

การสร้างวันที่แบบ UTC

Date.UTC รับอาร์กิวเมนต์ส่วนประกอบแบบเดียวกับตัวสร้าง แต่ตีความค่าเหล่านั้นเป็น UTC แล้วคืนค่าประทับเวลาที่ส่งต่อให้ new Date ได้

const ts = Date.UTC(2024, 0, 1, 0, 0, 0)
const d = new Date(ts)
console.log(d.getUTCHours())

ตัวกำหนดค่า UTC

ตัวกำหนดค่าอย่าง setUTCHours จะปรับวันที่ในเขตเวลา UTC โดยทำงานคล้ายตัวกำหนดค่าเวลาท้องถิ่น แต่ยึด UTC เป็นหลัก

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
d.setUTCHours(15)
console.log(d.getUTCHours())

Z ในสตริง ISO

Z ที่อยู่ท้ายสตริง ISO หมายความว่าเวลาอยู่ใน UTC ซึ่งเรียกอีกอย่างว่าเวลาซูลู สตริงที่ไม่มี Z อาจถูกตีความเป็นเวลาท้องถิ่น

const d = new Date("2024-01-15T10:00:00Z")
console.log(d.getUTCHours())

ช่วงเวลาเดียวกัน การอ่านค่าต่างกัน

ตัวอ่านค่าเวลาท้องถิ่นและ UTC อธิบายช่วงเวลาเดียวกันในเขตเวลาที่ต่างกัน ดังนั้นค่าชั่วโมงจึงอาจต่างกันตามออฟเซ็ต

const d = new Date(Date.UTC(2024, 0, 1, 12, 0, 0))
console.log(d.getUTCHours())

การจัดเก็บเป็น UTC

แนวปฏิบัติที่ดีโดยทั่วไปคือจัดเก็บวันที่ทั้งหมดเป็น UTC แล้วแปลงเป็นเวลาท้องถิ่นเฉพาะตอนแสดงผล วิธีนี้ช่วยหลีกเลี่ยงความกำกวมระหว่างภูมิภาค

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

การระบุเขตเวลา

เมธอดจัดรูปแบบรับตัวเลือก timeZone เพื่อให้คุณแสดงช่วงเวลาในเขตเวลาที่เลือกได้ เช่น ระบุ UTC อย่างชัดเจน

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

การหลีกเลี่ยงข้อผิดพลาดที่พบบ่อย

การใช้เมธอดเวลาท้องถิ่นและ UTC ปะปนกันกับวันที่เดียวกันทำให้เกิดข้อผิดพลาดที่สังเกตได้ยาก เลือกรูปแบบใดรูปแบบหนึ่งต่อการคำนวณแต่ละครั้ง และใช้อย่างสม่ำเสมอ

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
console.log(d.getUTCFullYear())
console.log(d.getUTCMonth())

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเรื่องเขตเวลาของคุณ

สรุป

สรุป: อ่านและเขียนวันที่โดยใช้เวลาท้องถิ่นหรือ UTC อย่างสม่ำเสมอ

  • ตัวอ่านค่าและตัวกำหนดค่า UTC ทำงานในเขตเวลาสากล
  • getTimezoneOffset คืนค่าเป็นนาที โดยมีเครื่องหมายกลับด้าน
  • ส่วนต่อท้าย Z ระบุว่าสตริง ISO เป็น UTC
  • จัดเก็บเป็น UTC และแสดงผลเป็นเวลาท้องถิ่น
const d = new Date(Date.UTC(2024, 0, 1, 12, 0, 0))
console.log(d.getUTCHours())

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

บทเรียน “เขตเวลาและ UTC” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “เขตเวลาและ UTC”

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

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

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

บทเรียน “เขตเวลาและ UTC” ใช้เวลานานแค่ไหน

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

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

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

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

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