By 
เชื่อว่าหลายคนที่เคยเขียน 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 จะทำการเรียงลำดับตัวอักษรตามความสำคัญของภาษาที่ระบุลงไป
Intl.ListFormat
ถ้ามีคำอยู่ใน Array และต้องการเชื่อมคำในแต่ละภาษา ซึ่งแต่ละภาษาจะมีตัวจัดการรูปแบบของ List ที่แตกต่างกัน เช่น
- ถ้าเป็นภาษาอังกฤษ รูปแบบของ List ก็จะเป็น a, b and c
- ถ้าเป็นภาษาไทย รูปแบบของ List ก็จะเป็น ไก่ ไข่ และงู
Intl.ListFormat เป็น function ที่ช่วยในการจัดการคำเชื่อมในภาษาต่าง ๆ ได้ถูกหลักการ และสามารถจัดการได้ง่าย
Intl.NumberFormat
หนึ่งในปัญหาที่หลายคนปวดหัวมาก ในการจัดการรูปแบบของตัวเลข บางระบบต้องแปลงเป็นตัวเลขไทยอีก ซึ่งถ้าไม่อยากยุ่งยาก หลายคนจะโหลด Library ในการจัดการ แต่เราสามารถใช้ Intl.Numberformat ได้เลย ! โดยไม่ต้องไปโหลด Library เพิ่ม
ตัวอย่างรูปแบบที่มี
- หน่วยเงิน
- หน่วยวัด
- แปลงตัวเลข (%)
- ตัวเลขวิทยาศาสตร์
- byte / bit
- และอื่น ๆ
หมายเหตุ
- ถ้าต้องการใช้ตัวเลขไทย สามารถระบุภาษาด้วย th-TH-u-nu-thai
- การระบุภาษาด้วย en-US หมายถึง ภาษาอังกฤษ (อเมริกัน)
- การระบุภาษาด้วย en-GB หมายถึง ภาษาอังกฤษ (สหราชอาณาจักร)
Intl.DateTimeFormat
ในการจัดการรูปแบบของวันที่ และเวลา ตัว Intl.DateTimeFormat ก็สามารถจัดการได้ง่าย ๆ และสามารถรองรับได้หลากหลายรูปแบบมาก ๆ
จากตัวอย่าง Intl.DateTimeFormat จะมี options ให้เราเลือกได้เยอะมาก ๆ เพียงพอกับความต้องการในปัจจุบัน
Intl.RelativeTimeFormat
ถ้าเล่น Facebook หรือ Social Media อื่น ๆ เมื่อเราเห็นโพสต์ของเมื่อวาน อาจจะเห็นคำว่า 1 วันที่แล้ว หรือ 1 day ago กัน ซึ่งตัว Intl.RelativeTimeFormat ก็มีตัวนี้จัดการให้เราด้วย
และเป็นที่แน่นอนว่า options ที่ Intl.RelativeTimeFormat ให้มาก็มีให้เลือกเยอะแยะมากมายเช่นกัน
ผมได้หยิบยกตัวอย่างของ 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://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) คอร์สเรียนออนไลน์ที่จะช่วยแนะนำแนวทางการเขียนภาษานี้ให้มีประสิทธิภาพมากขึ้นครับ
