Technology

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

what-is-javascript-intl-api | 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 และเป็นได้มากกว่าแค่เรื่องเวลา !
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 จะทำการเรียงลำดับตัวอักษรตามความสำคัญของภาษาที่ระบุลงไป

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

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

You may also like

Airtable | Skooldio Blog - Airtable คืออะไร? รู้จักเครื่องมือจัดการ Operations อัตโนมัติ ที่ทำได้มากกว่า Excel
Business

Airtable คืออะไร? รู้จักเครื่องมือจัดการ Operations อัตโนมัติ ที่ทำได้มากกว่า Excel

ปัจจุบันหลายๆ องค์กรมักใช้ Spreadsheet อย่าง Excel หรือ Google Sheets ในการทำงานร่วมกัน ไม่ว่าจะเป็นการทำตารางแสดงแผนการดำเนินงาน, การจัดการ Operations, การบันทึกข้อมูลสินค้าหรือยอดขาย การคำนวณทางบัญชี การบันทึกรายชื่อลูกค้าจำนวนมาก ...

More in:Technology

Docker คืออะไร | Skooldio Blog Technology

Docker คืออะไร? เครื่องมือยอดนิยมที่จะช่วย Dev ทำงานเร็วขึ้น 2 เท่า!

การ deployment เป็นหนึ่งในขั้นตอนการทำงานที่ dev ทุกคนต้องเจอไม่ว่าจะเป็นองค์กรขนาดเล็กหรือขนาดใหญ่ แต่สิ่งที่แต่ละองค์กรไม่เหมือนกันคือความยุ่งยากซับซ้อน ระยะเวลาในการ deploy ที่ต่างกัน ขึ้นอยู่กับ process และเครื่องมือที่ใช้ ซึ่ง Docker ก็เป็นหนึ่งในเครื่องมือยอดนิยมที่จะช่วยให้การ ...
Technology

DevSecOps คืออะไร? ทำไมทุกองค์กรต้องให้ความสำคัญเป็นอย่างมากในปัจจุบัน

DevSecOps คืออะไร? ก่อนอื่นมาดูที่ไปที่มากันก่อน ว่า DevOps / DevSecOps เกิดขึ้นจากอะไร  ในช่วงปี 2009 ในงาน Web Performance and Operations ...
Skooldio Blog - หมัดต่อหมัด Microservices vs. Monolithic บริษัทเราเหมาะกับอะไรมากกว่า? Technology

หมัดต่อหมัด Microservices vs. Monolithic บริษัทเราเหมาะกับอะไรมากกว่า?

ในโลกที่เทคโนโลยีเข้ามามีบทบาทสำคัญในธุรกิจ การพัฒนาซอฟต์แวร์ย่อมเป็นสิ่งที่สำคัญมากสำหรับองค์กรต่าง ๆ วันนี้ทาง Skooldio จึงได้นำ 2 วิธียอดฮิตในการพัฒนาซอฟต์แวร์ ซึ่งก็คือ Monolithic และ Microservices มาเทียบกันหมัดต่อหมัดว่าข้อดีข้อเสียของทั้ง 2 ระบบนั้นเป็นอย่างไร ...

Comments are closed.