Internationalization API

Internationalization API: ทำให้ JavaScript ของคุณพูดได้หลายภาษา

เมื่อเราพัฒนาเว็บแอปพลิเคชันที่ต้องการรองรับผู้ใช้งานจากหลากหลายประเทศ การจัดการเรื่องภาษา, รูปแบบวันที่, ตัวเลข, และการเรียงลำดับจึงเป็นสิ่งสำคัญ JavaScript มี Internationalization API (Intl) ที่ช่วยให้เราจัดการเรื่องเหล่านี้ได้อย่างง่ายดายและมีประสิทธิภาพ บทความนี้จะพาคุณไปรู้จักกับ Intl API และวิธีการใช้งานใน JavaScript

ทำไมต้อง Internationalization API?

ก่อนที่จะมี Intl API นักพัฒนาต้องใช้ library ภายนอกหรือเขียน code เองเพื่อจัดการเรื่องภาษาและรูปแบบข้อมูล ซึ่งมักจะซับซ้อนและอาจมีข้อผิดพลาดได้ Intl API ถูกออกแบบมาเพื่อแก้ปัญหานี้ โดย提供 API ที่ครอบคลุมการทำงานที่เกี่ยวข้องกับการ internationalization และ localization (i18n and l10n) โดยอาศัยข้อมูลจาก locale ที่ระบุ

Trade-off: การใช้ Intl API ทำให้ code ของคุณขึ้นอยู่กับ implementation ของ browser หรือ runtime environment ดังนั้นผลลัพธ์อาจแตกต่างกันเล็กน้อยในแต่ละ platform อย่างไรก็ตาม ข้อดีของการใช้งานง่ายและประสิทธิภาพที่สูงกว่าการเขียน code เองนั้นคุ้มค่ากว่ามาก

Intl.DateTimeFormat: จัดการรูปแบบวันที่และเวลา

Intl.DateTimeFormat คือ object ที่ใช้ในการจัดรูปแบบวันที่และเวลาให้เหมาะสมกับ locale ที่ระบุ

การสร้าง Intl.DateTimeFormat Object

คุณสามารถสร้าง Intl.DateTimeFormat object ได้โดยระบุ locale และ options ต่างๆ:

const dateTimeFormat = new Intl.DateTimeFormat('th-TH', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  timeZone: 'Asia/Bangkok'
});

• 'th-TH': ระบุ locale เป็นภาษาไทย ประเทศไทย
• options: object ที่กำหนดรูปแบบวันที่และเวลา
• year: 'numeric', '2-digit'
• month: 'numeric', '2-digit', 'long', 'short', 'narrow'
• day: 'numeric', '2-digit'
• weekday: 'long', 'short', 'narrow'
• hour: 'numeric', '2-digit'
• minute: 'numeric', '2-digit'
• second: 'numeric', '2-digit'
• timeZone: ระบุ Time Zone (สำคัญมาก!)

การใช้งาน DateTimeFormat

เมื่อสร้าง DateTimeFormat object แล้ว คุณสามารถใช้ method format() เพื่อจัดรูปแบบวันที่:

const date = new Date();
const formattedDate = dateTimeFormat.format(date);
console.log(formattedDate); // วันพุธที่ 15 พฤษภาคม 2567 14:30:45

ตัวอย่างการใช้งานอื่นๆ

การแสดงวันที่แบบต่างๆ:

const enUsDateFormat = new Intl.DateTimeFormat('en-US'); // US English
const deDeDateFormat = new Intl.DateTimeFormat('de-DE'); // German

console.log(enUsDateFormat.format(date)); // 5/15/2024
console.log(deDeDateFormat.format(date)); // 15.5.2024

การแสดงเวลาอย่างเดียว:

const timeFormat = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hour12: true // Use 12-hour clock
});

console.log(timeFormat.format(date)); // 2:30:45 PM

Intl.NumberFormat: จัดการรูปแบบตัวเลข

Intl.NumberFormat คือ object ที่ใช้ในการจัดรูปแบบตัวเลขให้เหมาะสมกับ locale ที่ระบุ

การสร้าง Intl.NumberFormat Object

คุณสามารถสร้าง Intl.NumberFormat object ได้โดยระบุ locale และ options ต่างๆ:

const numberFormat = new Intl.NumberFormat('th-TH', {
  style: 'currency',
  currency: 'THB',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

• 'th-TH': ระบุ locale เป็นภาษาไทย ประเทศไทย
• options: object ที่กำหนดรูปแบบตัวเลข
• style: 'decimal', 'currency', 'percent'
• currency: รหัสสกุลเงินตาม ISO 4217 (เช่น 'USD', 'EUR', 'THB')
• minimumFractionDigits: จำนวนหลักทศนิยมต่ำสุด
• maximumFractionDigits: จำนวนหลักทศนิยมสูงสุด

การใช้งาน NumberFormat

เมื่อสร้าง NumberFormat object แล้ว คุณสามารถใช้ method format() เพื่อจัดรูปแบบตัวเลข:

const number = 12345.6789;
const formattedNumber = numberFormat.format(number);
console.log(formattedNumber); // 12,345.68 ฿

ตัวอย่างการใช้งานอื่นๆ

การแสดงตัวเลขเป็นเปอร์เซ็นต์:

const percentFormat = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

const percentage = 0.255;
console.log(percentFormat.format(percentage)); // 25.50%

การแสดงตัวเลขแบบต่างๆ:

const enUsNumberFormat = new Intl.NumberFormat('en-US');
const deDeNumberFormat = new Intl.NumberFormat('de-DE');

console.log(enUsNumberFormat.format(12345.6789)); // 12,345.679
console.log(deDeNumberFormat.format(12345.6789)); // 12.345,679

Intl.Collator: จัดการการเรียงลำดับข้อความ

Intl.Collator คือ object ที่ใช้ในการเปรียบเทียบและเรียงลำดับข้อความตาม locale ที่ระบุ

การสร้าง Intl.Collator Object

คุณสามารถสร้าง Intl.Collator object ได้โดยระบุ locale และ options ต่างๆ:

const collator = new Intl.Collator('th-TH', {
  sensitivity: 'base',
  ignorePunctuation: true,
});

• 'th-TH': ระบุ locale เป็นภาษาไทย ประเทศไทย
• options: object ที่กำหนดวิธีการเปรียบเทียบ
• sensitivity: 'base' (ไม่สนใจ case และ diacritics), 'accent' (สนใจ diacritics), 'case' (สนใจ case), 'variant' (สนใจทุกอย่าง)
• ignorePunctuation: boolean (true: ไม่สนใจเครื่องหมายวรรคตอน)

การใช้งาน Collator

เมื่อสร้าง Collator object แล้ว คุณสามารถใช้ method compare() เพื่อเปรียบเทียบข้อความ:

const text1 = 'สวัสดี';
const text2 = 'สวัสดิ์';
const comparisonResult = collator.compare(text1, text2);

if (comparisonResult === 0) {
  console.log('ข้อความเหมือนกัน');
} else if (comparisonResult < 0) {
  console.log('ข้อความแรกมาก่อน');
} else {
  console.log('ข้อความสองมาก่อน');
}

การเรียงลำดับ Array

คุณสามารถใช้ Collator ในการเรียงลำดับ array ของข้อความได้:

const names = ['สมชาย', 'สมหญิง', 'สมเกียรติ', 'สมศักดิ์'];
names.sort(collator.compare);
console.log(names); // ["สมเกียรติ", "สมชาย", "สมศักดิ์", "สมหญิง"]

แนวปฏิบัติที่ดี

• ระบุ locale อย่างชัดเจน: การระบุ locale ที่ถูกต้องเป็นสิ่งสำคัญเพื่อให้ได้ผลลัพธ์ที่ถูกต้อง
• ใช้ Time Zone ที่ถูกต้อง: เมื่อทำงานกับวันที่และเวลา อย่าลืมระบุ Time Zone ที่ถูกต้อง
• ทดสอบกับหลาย locale: ทดสอบแอปพลิเคชันของคุณกับหลาย locale เพื่อให้แน่ใจว่าการ internationalization ทำงานได้อย่างถูกต้อง
• พิจารณา Performance: การสร้าง Intl object อาจมีค่าใช้จ่าย ดังนั้นควร reuse object เดิมแทนที่จะสร้างใหม่บ่อยๆ

สรุป

Internationalization API เป็นเครื่องมือที่มีประสิทธิภาพในการจัดการเรื่องภาษา, รูปแบบวันที่, ตัวเลข, และการเรียงลำดับใน JavaScript การใช้งาน Intl API ช่วยให้คุณสร้างเว็บแอปพลิเคชันที่รองรับผู้ใช้งานจากหลากหลายประเทศได้อย่างง่ายดายและมีประสิทธิภาพ อย่าลืมพิจารณา trade-offs และแนวปฏิบัติที่ดีเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด