Technology

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

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

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

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

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

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

รู้จัก Intl API: Built-in JavaScript ที่มาแทน Moment.js และเป็นได้มากกว่าแค่เรื่องเวลา! | Skooldio Blog
https://www.ifw-kiel.de/fileadmin/_processed_/f/3/csm_Innovation_and_Internationalization_05fb735e3b.jpg

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 API: Built-in JavaScript ที่มาแทน Moment.js และเป็นได้มากกว่าแค่เรื่องเวลา! | Skooldio Blog

อนาคตของ 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) คอร์สเรียนออนไลน์ที่จะช่วยแนะนำแนวทางการเขียนภาษานี้ให้มีประสิทธิภาพมากขึ้นครับ

คอร์ส Modern Javascript (ES6) คอร์สเรียนออนไลน์เพื่ออัพสกิล Javascript

You may also like

Skooldio Blog - 4 เทคนิคในปัจจุบันที่ใช้ A.I. และ Machine learning เพื่อการแพทย์ | Featured Image
Technology

4 เทคนิคในปัจจุบันที่ใช้ A.I. และ Machine learning เพื่อการแพทย์

เป็นที่รู้กันว่า Artificial Intelligence (A.I.)  หรือ ปัญญาประดิษฐ์ กลายเป็นหนึ่งในเครื่องมือที่ช่วยให้มนุษย์ใช้ชีวิตได้อย่างสะดวกสบายมากขึ้น ไม่ว่าจะในด้านของทางธุรกิจ หรือทางการเกษตร แต่ที่พลาดไม่ได้เลยคือ A.I. สามารถช่วยพัฒนาศักยภาพทางการแพทย์ได้เป็นอย่างดี โดยแบ่งออกเป็น 4 ตัวอย่าง ...

More in:Technology

Skooldio Blog - อยากเข้าสายบัญชี เขียน Python ช่วยอะไรได้บ้าง | Featured Image Technology

อยากเข้าสายบัญชี เขียน Python ช่วยอะไรได้บ้าง

บนตลาดแรงงานยุคใหม่ที่มีการแข่งขันสูงอาชีพที่ยังมาแรงและเป็นที่ต้องการอย่างต่อเนื่อง คือ สายบัญชี ด้วยวิวัฒนาการของเทคโนโลยีที่เข้ามาเป็นส่วนหนึ่งของชีวิตในทุกวัน ปฏิเสธไม่ได้เลยว่าการรู้แค่เครื่องมือเบื้องต้นก็คงจะไม่เพียงพอ รวมถึงวิธีจัดการทางบัญชีก็มีการนำเอาเทคโนโลยีมาใช้มากขึ้น ดังนั้นหนึ่งในเครื่องมือที่เราอยากแนะนำให้สายบัญชีรู้จักคือการเขียนโปรแกรม Python นั่นเอง คงเกิดความสงสัยขึ้นมาบ้างแล้วล่ะสิ ว่าทำไมสายบัญชีอย่างเราต้องมาเรียนรู้การเขียนโปรแกรมอย่าง Python กันนะ  ปัจจุบันในยุคดิจิทัล ทักษะและจุดเด่นของการเป็นนักบัญชีได้เปลี่ยนแปลงไป ...
Technology

จะเกิดอะไรขึ้น ถ้าเอา Blockchain ไปใช้กับการเมือง?!

ทุกวันนี้ เทคโนโลยี Blockchain ถูกนำไปใช้ในหลากหลายวงการทั่วโลก ไม่ได้จำกัดอยู่แค่วงการ Cryptocurrency เพียงเท่านั้น ปัจจุบันเราอาจจะเห็นข่าวผ่านตาอยู่บ่อยๆ ครั้ง ถึงการนำ Blockchain ไปใช้ในอุตสาหกรรมต่างๆ ไม่ว่าจะเป็นอุตสาหกรรมขนส่งบ้าง หรือ ในเชิงสาธารณะสุขบ้างก็ตาม ...
Blockchain ใน 3 ธุรกิจที่คุณอาจคิดไม่ถึง - Skooldio Blog | Blockchain ใน 3 ธุรกิจที่คุณอาจคิดไม่ถึง Technology

Blockchain ใน 3 ธุรกิจที่คุณอาจคิดไม่ถึง

ทุกวันนี้เวลาพูดถึง Blockchain ภาพแรกที่หลายๆ คนนึกถึงคงไม่พ้น เรื่อง Cryptocurrency หรือบางทีอาจจะเป็น Bitcoin หรือ Dogecoin ที่ Elon Musk ออกมาทวีตปั่นอยู่ในหลายๆ ครั้ง ...
Skooldio-fid-fcp Technology

ค่า FCP, FID สูง ความเสี่ยงต่อ UX ที่คนเขียนเว็บต้องระวัง

หลังจากที่เราได้รู้วิธีการวัดความเร็วของเว็บไซต์ด้วย PageSpeed Insights (สำหรับใครยังไม่เคยอ่านสามารถคลิกได้ที่นี่) วันนี้เราจะมาพูดถึงเรื่องของ error ที่ทำให้เว็บไซต์โหลดช้าซึ่งพบเจอได้บ่อยๆ นั่นคือค่า FCP และ FID ที่หลายคนอาจจะพอผ่านตากันมาบ้างแล้ว แต่ในบทความนี้เราจะพามาเจาะลึก error ทั้งสองว่ามีความสำคัญอย่างไรต่อการ ...

Comments are closed.