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

Progressive Web App คืออะไร
Technology

Progressive Web Apps คืออะไร?

แค่เขียน Apps อย่างเดียวคงไม่พอ! เมื่อ Users เลือกดาวน์โหลด Apps เท่าที่จำเป็นเพื่อประหยัดพื้นที่ใช้งาน จากสถิติการใช้งานของ Users ที่ “ไม่ตัดสินใจติดตั้ง Apps” เพราะขั้นตอนที่ยุ่งยากและเลือกติดตั้งเฉพาะ Apps ...
Data

Apache Airflow คืออะไร แล้วทำไมองค์กรชั้นนำส่วนใหญ่ถึงเลือกใช้

Apache Airflow คือ 1 ใน Workflow Management ที่ได้รับความนิยม และองค์กรชั้นนำระดับโลกหลายๆ องค์กรเลือกใช้ โดยเฉพาะอย่างยิ่งในการสร้าง Data Pipelines เพื่อจัดการกับข้อมูลจำนวนมหาศาล ส่วนหนึ่งเพราะองค์กรต่าง ...

More in:Technology

8 เหตุผลทำไมควรเขียน Scala Technology

8 เหตุผลที่ Dev ควรลองเขียนภาษา Scala ตั้งแต่ตอนนี้

เราเคยเกริ่นถึงภาษา Scala ไปบ้างแล้วจากบทความ ภาษา Scala มีจุดเด่นอะไร? ทำไมกำลังมาแรงในสาย Developer และ Data Engineer แต่ในกลุ่มนักพัฒนาหลายคนยังสงสัยว่าภาษา Scala มีความเหมาะไปใช้ในงานแบบไหน? ทำไมถึงต้องหันมาศึกษา ...
ภาษา Scala คืออะไร Technology

ภาษา Scala มีจุดเด่นอะไร? ทำไมกำลังมาแรงในสาย Developer และ Data Engineer

Scala คือ ภาษา Programming ที่กำลังมาแรงและเริ่มมีความนิยมใช้กันขึ้นเรื่อย ๆ จุดเริ่มต้นภาษา Scala เรียกได้ว่าเป็นลูกอีกคนหนึ่งของภาษา Java เช่นเดียวกับภาษา Kotlin ที่พัฒนาต่อยอดมาเพื่อแก้ไขข้อบกพร่องบางอย่างของภาษา Java ในจุดประสงค์ที่แตกต่างกัน ...
Software Architecture Technology

3 Software Architecture Design ที่นิยมใช้พัฒนาระบบซอฟต์แวร์ขนาดใหญ่

ในการออกแบบซอฟต์แวร์ขนาดใหญ่ในองค์กร มักจะมีการทำงานร่วมกันโดยคนจำนวนมาก หากเราต่างคนต่างเขียนซอฟต์แวร์ไปในทางที่ตัวเองเห็นว่าดี ซอฟต์แวร์ที่แต่ละคนทำก็อาจจะทำงานร่วมกันไม่ได้หรือมีปัญหาตอนที่ Integrate เป็น Solution ใหญ่ ดังนั้น การทำซอฟต์แวร์ในระดับนั้นจึงจำเป็นต้องมีการแบ่งสันปันส่วน และมีการออกแบบ Software Architecture เพื่อให้ทำงานร่วมกันได้ดีและมองเห็นภาพรวมไปในทางเดียวกัน ทั้งระหว่างนักพัฒนาในทีมพัฒนากันเอง ...
Technology

สรุปเรื่อง Activity Lifecycle ของการพัฒนา Android app

Android Activity Lifecycle คืออะไร? ในการทำงานของแอปพลิเคชันจริง ๆ แล้วไม่ได้ทำงานเพียงแค่เฉพาะเวลาที่ผู้ใช้งานเปิดขึ้นมาบนหน้าจอเท่านั้น แต่ยังคงทำงานบางอย่างในขณะที่แอปพลิเคชันถูกย่อ หรือแม้กระทั่งตอนที่ผู้ใช้เปลี่ยนไปใช้แอปพลิเคชันอื่นอยู่ ซึ่งจริง ๆ แล้ว Android สามารถออกแบบกำหนดให้แอปพลิเคชันทำงานในสถานะต่าง ๆ ...

Comments are closed.