รู้จัก Intl API: Built-in JavaScript ที่มาแทน Moment.js และเป็นได้มากกว่าแค่เรื่องเวลา!

เชื่อว่าหลายคนที่เคยเขียน JavaScript คงเคยเจอปัญหาในการจัดรูปแบบการแสดงผล Date & Time, การ format เวลา หรือแม้กระทั่งการจัดลำดับตัวอักษรมาไม่มากก็น้อย แต่รู้หรือไม่ว่า JavaScript นั้นมี built-in object ที่ช่วยจัดการรูปแบบวันที่, เวลา, ภาษา หรือแม้กระทั่งสกุลเงิน มาให้เรียกใช้ได้อย่างง่าย ๆ !

ซึ่งสิ่งนั้นก็คือ Intl หรือ ECMAScript Internationalization API

ในประเทศไทยคนพูดถึงเรื่องนี้ยังถือว่าน้อยมาก เอาจริง ๆ ผมก็เพิ่งมารู้จัก Intl ตอน moment.js หยุดพัฒนา แล้วทาง moment.js แนะนำตัวนี้มาให้ใช้แทนเหมือนกัน

เมื่อผมลองใช้แล้วทำให้รู้เลยว่า Intl ไม่ได้มีดีแค่เรื่องเวลา !!

---

Intl คืออะไร

ถ้าพูดง่าย ๆ Intl คือ built-in object ในตระกูล ECMAScript ใช้สำหรับจัดการเกี่ยวกับส่วนที่เกี่ยวข้องกับความ sensitive ของภาษาต่าง ๆ ในชีวิตจริง ซึ่งในที่นี้ ไม่ได้หมายถึงเรื่องการแปลภาษาเพียงอย่างเดียว แต่รวมถึงจะเป็นตัวจัดการจำพวกวันที่ เวลา สกุลเงิน และการจัดลำดับของข้อความ เป็นต้น ซึ่งในแต่ละภาษาจะมีการจัดการไม่เหมือนกัน ถึงตอนนี้อาจจะฟังดูงง ๆ ผมเชื่อว่า ถ้าดูตัวอย่าง code อาจเข้าใจมากขึ้นครับ 😊

---

Code Example

การที่จะใช้ Intl นั้น จำเป็นที่ต้องระบุภาษาเสมอ (หมายถึง ภาษาที่เราพูดกันอยู่ ไม่ใช่ภาษา Programming นะ) ในตัวอย่างนี้เราจะเน้นใช้ภาษาไทย กับภาษาอังกฤษเป็นหลัก จากนั้นเราจะเอาผลลัพธ์ออกมาให้เห็นกัน !!!

Intl.Collator

Intl.Collator.compare สำหรับเปรียบเทียบ string เพื่อเรียงลำดับตามลำดับความสำคัญของภาษา 

จากตัวอย่างเราจะใช้ Intl.Collator.compare ผ่าน function letterSort มีพารามิเตอร์ lang ในการระบุภาษาลงไป และ function จะทำการเรียงลำดับตัวอักษรตามความสำคัญของภาษาที่ระบุลงไป

https://gist.github.com/icesernia/e51610ce125b960bdf1d1369a072250d

Intl.ListFormat

ถ้ามีคำอยู่ใน Array และต้องการเชื่อมคำในแต่ละภาษา ซึ่งแต่ละภาษาจะมีตัวจัดการรูปแบบของ List ที่แตกต่างกัน เช่น

• ถ้าเป็นภาษาอังกฤษ รูปแบบของ List ก็จะเป็น a, b and c
• ถ้าเป็นภาษาไทย รูปแบบของ List ก็จะเป็น ไก่ ไข่ และงู

Intl.ListFormat เป็น function ที่ช่วยในการจัดการคำเชื่อมในภาษาต่าง ๆ ได้ถูกหลักการ และสามารถจัดการได้ง่าย

https://gist.github.com/icesernia/47f1a6a88cc83f24e21b67408620dcfd

Intl.NumberFormat

หนึ่งในปัญหาที่หลายคนปวดหัวมาก ในการจัดการรูปแบบของตัวเลข บางระบบต้องแปลงเป็นตัวเลขไทยอีก ซึ่งถ้าไม่อยากยุ่งยาก หลายคนจะโหลด Library ในการจัดการ แต่เราสามารถใช้ Intl.Numberformat ได้เลย ! โดยไม่ต้องไปโหลด Library เพิ่ม

ตัวอย่างรูปแบบที่มี

• หน่วยเงิน
• หน่วยวัด
• แปลงตัวเลข (%)
• ตัวเลขวิทยาศาสตร์
• byte / bit
• และอื่น ๆ

หมายเหตุ

• ถ้าต้องการใช้ตัวเลขไทย สามารถระบุภาษาด้วย th-TH-u-nu-thai
• การระบุภาษาด้วย en-US หมายถึง ภาษาอังกฤษ (อเมริกัน)
• การระบุภาษาด้วย en-GB หมายถึง ภาษาอังกฤษ (สหราชอาณาจักร)

https://gist.github.com/icesernia/52286b2de088dda9033ac55c4743d2e4

Intl.DateTimeFormat

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

จากตัวอย่าง Intl.DateTimeFormat จะมี options ให้เราเลือกได้เยอะมาก ๆ เพียงพอกับความต้องการในปัจจุบัน

https://gist.github.com/icesernia/6ee8ce4fc4c7e0f25ab4f37dc7a7664f

Intl.RelativeTimeFormat

ถ้าเล่น Facebook หรือ Social Media อื่น ๆ เมื่อเราเห็นโพสต์ของเมื่อวาน อาจจะเห็นคำว่า 1 วันที่แล้ว หรือ 1 day ago กัน ซึ่งตัว Intl.RelativeTimeFormat ก็มีตัวนี้จัดการให้เราด้วย

และเป็นที่แน่นอนว่า options ที่ Intl.RelativeTimeFormat ให้มาก็มีให้เลือกเยอะแยะมากมายเช่นกัน

https://gist.github.com/icesernia/eea0ea1291fc5b058354d9d797d955f7

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

---

Browser และภาษาที่รองรับ

เนื่องจากภาษา JavaScript นิยมใช้ทั้งฝั่งหน้าบ้าน และหลังบ้าน การที่จะใช้ Intl นั้นต้องตรวจสอบ version ให้ดีด้วย เพราะ version เก่า ๆ ทั้งในส่วนของ Browser Node.js หรือ JavaScript เพียว ๆ เองก็ตาม อาจยังไม่ support ตัว Intl

อีกหนึ่งข้อควรระวัง ถ้าอยากใช้ Intl ด้วยภาษาไทย และใช้ node.js ในการจัดการ แนะนำให้อัพเกรดเป็น version 14 ซึ่งน่าจะครอบคุมภาษาไทยได้ทุก function ใน Intl (ถ้าต่ำกว่านี้ บาง function อาจใช้กับภาษาไทยไม่ได้)

ถ้าคุณอยาก support version เก่า ๆ ควรใช้ polyfill ด้วยนะครับ ผมแนะนำตัว polyfill ของ format.js ในการจัดการ

---

อนาคตของ Intl

ในอนาคต Intl จะมี function ที่ทำให้เราสามารถใช้งานได้เยอะ และหลากหลายมากกว่านี้แน่นอน ซึ่งหนึ่งในตัวที่น่าสนใจในอนาคต คือ Intl.DateTimeFormat.prototype.formatRange ที่สามารถทำให้เราจัดการรูปแบบ range ของวันที่ และเวลาได้ง่าย ๆ และมีรูปแบบที่ถูกต้องของแต่ละภาษา รองรับในบาง Browser แล้วด้วย

สุดท้ายนี้ ผมมองว่า Intl จะนิยมมากในไทย และจะมีการพูดถึงกันหลากหลายในวงการภาษา ECMAScript มากขึ้นครับ

---

Reference

https://github.com/tc39/ecma402

https://tc39.es/ecma402/

https://docs.w3cub.com/javascript/global_objects/intl

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

---

Intl เป็นเพียงหนึ่งในหลายตัวช่วยของ JavaScript เท่านั้นครับ ยังมีเคล็ดลับและเทคนิคสำคัญ ๆ อีกหลายอย่างที่ผมคิดว่ามีประโยชน์และจะช่วยให้ทุกคนเขียน JavaScript ได้อย่างสนุกและง่ายขึ้น

ซึ่งสำหรับใครที่กำลังหาคอร์สเรียนออนไลน์เพื่ออัพสกิล JavaScript นั้น ตอนนี้ Skooldio เองก็มี คอร์ส Modern JavaScript (ES6) คอร์สเรียนออนไลน์ที่จะช่วยแนะนำแนวทางการเขียนภาษานี้ให้มีประสิทธิภาพมากขึ้นครับ