วิธีที่ชัดเจนในการจัดรูปแบบวันที่สำหรับไซต์ต่างประเทศ
รูปแบบวันที่จะแตกต่างกันไปตามภูมิภาคและภาษาดังนั้นมันจะมีประโยชน์เสมอถ้าเราสามารถหาวิธีแสดงวันที่ให้กับผู้ใช้เฉพาะภาษาและภูมิภาคของพวกเขา.
ย้อนกลับไปในเดือนธันวาคม 2012 ECMA เปิดตัวข้อกำหนดของ Internationalization API สำหรับ JavaScript Internationalization API ช่วยให้เราแสดงข้อมูลบางอย่างตามข้อกำหนดของภาษาและ cutural มันสามารถใช้ในการ ระบุสกุลเงิน, เขตเวลา และอื่น ๆ.
ในโพสต์นี้เราจะตรวจสอบ การจัดรูปแบบวันที่ ใช้ API นี้.
รู้สถานที่ของผู้ใช้
ในการแสดงวันที่ตามสถานที่ที่ต้องการของผู้ใช้อันดับแรกเราต้องรู้ว่าสถานที่ที่ต้องการคืออะไร ปัจจุบันวิธีที่จะเข้าใจผิดได้ว่าต้องถามผู้ใช้ อนุญาตให้ผู้ใช้เลือกภาษาและการตั้งค่าภูมิภาคที่ต้องการในหน้าเว็บ.
แต่ถ้านั่นไม่ใช่ตัวเลือกคุณสามารถตีความ ยอมรับภาษา ขอส่วนหัวหรืออ่าน navigator.language(สำหรับ Chrome และ Firefox) หรือ navigator.browserLanguage(สำหรับ IE) ค่า.
โปรดทราบว่าตัวเลือกบางตัวนั้นไม่สามารถส่งคืนภาษาที่ต้องการของ UI เบราว์เซอร์ได้.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "en"; // ส่งคืนแท็กภาษาเช่น 'en-GB'
ตรวจสอบ API สากล
หากต้องการทราบว่าเบราว์เซอร์รองรับ API สากลหรือไม่เราสามารถตรวจสอบว่ามีวัตถุระดับโลกหรือไม่ สนามบินนานาชาติ.
ถ้า (window.hasOwnProperty​("Intl") && typeof Intl === "object") // มี API สากลให้เราใช้นั่น สนามบินนานาชาติ วัตถุ
สนามบินนานาชาติ เป็นวัตถุระดับโลกสำหรับการใช้งาน Internationalization API มันมีสามคุณสมบัติซึ่งเป็นตัวสร้างสำหรับสามวัตถุคือ ผู้ตรวจทาน, NumberFormat, และ DateTimeFormat.
วัตถุที่เราจะใช้คือ DateTimeFormat ซึ่งจะช่วยให้เราจัดรูปแบบวันเวลาตามภาษาที่แตกต่างกัน.
DateTimeFormat วัตถุ
DateTimeFormat ตัวสร้างใช้เวลาสองอาร์กิวเมนต์ตัวเลือก;
สถานที่- สตริงหรืออาร์เรย์ของสตริงที่แสดงแท็กภาษาตัวอย่างเช่น “เดอ” สำหรับภาษาเยอรมัน, “en-GB” สำหรับภาษาอังกฤษที่ใช้ในสหราชอาณาจักร หากไม่ได้ระบุแท็กภาษาไว้โลแคลเริ่มต้นจะเป็นแท็กรันไทม์.ตัวเลือก- วัตถุที่มีคุณสมบัติที่ใช้ในการปรับแต่งตัวจัดรูปแบบ มันมีคุณสมบัติดังต่อไปนี้:
| คุณสมบัติ | ลักษณะ | ค่าที่เป็นไปได้ |
| วัน | วันของเดือน | “2 หลัก”, “เป็นตัวเลข” |
| ยุค | ยุคของวันที่ตกอยู่เช่น: BC | “แคบ”, “สั้น”, “ยาว” |
| formatMatcher | อัลกอริทึมที่ใช้สำหรับการจับคู่รูปแบบ | “ขั้นพื้นฐาน”, “แบบที่ดีที่สุด”[ค่าเริ่มต้น] |
| ชั่วโมง | แสดงชั่วโมงในเวลา | “2 หลัก”, “เป็นตัวเลข” |
| hour12 | ระบุรูปแบบ 12 ชั่วโมง (จริง) หรือรูปแบบ 24 ชั่วโมง (เท็จ) | จริง, เท็จ |
| localeMatcher | อัลกอริทึมที่ใช้สำหรับการจับคู่โลแคล | “ค้นหา”, “แบบที่ดีที่สุด”[ค่าเริ่มต้น] |
| นาที | นาทีในเวลา | “2 หลัก”, “เป็นตัวเลข” |
| เดือน | เดือนในหนึ่งปี | “2 หลัก”, “เป็นตัวเลข”, “แคบ”, “สั้น”, “ยาว” |
| ที่สอง | วินาทีในเวลา | “2 หลัก”, “เป็นตัวเลข” |
| เขตเวลา | เขตเวลาที่จะใช้ | “UTC”, ค่าเริ่มต้นคือเขตเวลารันไทม์ |
| timeZoneName | เขตเวลาของวันที่ | “สั้น”, “ยาว” |
| ในวันทำงาน | วันในสัปดาห์ | “แคบ”, “สั้น”, “ยาว” |
| ปี | ปีของวันที่ | “2 หลัก”, “เป็นตัวเลข” |
ตัวอย่าง:
formatter var = ใหม่ Intl.DateTimeFormat ('en-GB'); / * ส่งคืนตัวจัดรูปแบบที่สามารถจัดรูปแบบวันที่ในรูปแบบวันที่แบบอังกฤษ * / ตัวเลือก var = วันทำงาน: 'สั้น'; formatter var = ใหม่ Intl.DateTimeFormat ('en-GB' ตัวเลือก); / * ส่งคืนตัวจัดรูปแบบที่สามารถจัดรูปแบบวันที่ในรูปแบบวันที่ภาษาอังกฤษของสหราชอาณาจักร * พร้อมกับวันทำงานด้วยสัญกรณ์สั้น ๆ เช่น 'Thu' ในวันพฤหัสบดี * รูป ฟังก์ชัน
ตัวอย่างของ DateTimeFormat วัตถุมีคุณสมบัติ accessor (getter) ที่เรียกว่า รูป ซึ่งส่งคืนฟังก์ชันที่จัดรูปแบบ a วันที่ ขึ้นอยู่กับ สถานที่ และ ตัวเลือก พบใน DateTimeFormat ตัวอย่าง.
ฟังก์ชั่นใช้เวลา วันที่ วัตถุหรือ ไม่ได้กำหนด เป็นอาร์กิวเมนต์ที่เป็นทางเลือกและส่งคืน เชือก ในรูปแบบวันที่ร้องขอ.
บันทึก: หากมีข้อโต้แย้งอย่างใดอย่างหนึ่ง ไม่ได้กำหนด หรือไม่ได้ระบุไว้จะส่งคืนค่าของ Date.now () ในรูปแบบวันที่ร้องขอ.
นี่คือไวยากรณ์:
ใหม่ Intl.DateTimeFormat (). format () // จะส่งคืนวันที่ปัจจุบันในรูปแบบวันที่รันไทม์
และตอนนี้ให้เราจัดรูปแบบวันที่แบบง่าย ๆ.
ให้เราเปลี่ยนภาษาและดูผลลัพธ์.
ตอนนี้ได้เวลาค้นหาตัวเลือกแล้ว.
toLocaleDateString วิธี
แทนที่จะใช้ฟอร์แมตเตอร์แบบที่แสดงในตัวอย่างด้านบนคุณสามารถใช้ Date.prototype.toLocaleString ในทางเดียวกันกับ สถานที่ และ ตัวเลือก อาร์กิวเมนต์มีความคล้ายคลึงกัน แต่ขอแนะนำให้ใช้ DateTimeFormat วัตถุเมื่อจัดการกับวันที่มากเกินไปในใบสมัครของคุณ.
var mydate = new Date ('2015/04/22'); ตัวเลือก var = วันทำงาน: "สั้น", ปี: "ตัวเลข", เดือน: "ยาว", วัน: "ตัวเลข"; console.log (mydate.toLocaleDateString (en-GB 'ตัวเลือก)); // ส่งคืน "พุธ 22 เมษายน 2558" ทดสอบว่า สถานที่ ได้รับการสนับสนุน
เพื่อตรวจสอบการรองรับ สถานที่, เราสามารถใช้วิธีการ supportedLocalesOf ของ DateTimeFormat วัตถุ. ส่งคืนอาร์เรย์ของโลแคลที่สนับสนุนทั้งหมดหรืออาร์เรย์ว่างหากไม่มีโลแคลใดที่ได้รับการสนับสนุน.
สำหรับการทดสอบให้เราเพิ่มสถานที่จำลอง “blah” ในรายการสถานที่ที่จะตรวจสอบ.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // ส่งกลับ Array ["zh", "fa-pes"]
รองรับเบราว์เซอร์
ณ สิ้นเดือนเมษายน 2558 เบราว์เซอร์หลักรองรับ API สากล.
อ้างอิง
- ECMA นานาชาติ: ข้อมูลจำเพาะ API การทำให้เป็นสากลของ ECMAScript
- IANA: Language Subtag Registry
- Norbert's Corner: ECMAScript Internationalization API
