M

MLOG

ไทย

ปลดล็อกการเข้าถึงทั่วโลกด้วย JavaScript Intl API เรียนรู้แนวทางปฏิบัติที่ดีที่สุดด้าน Internationalization สำหรับการจัดรูปแบบวันที่ ตัวเลข สกุลเงิน และอื่นๆ เพื่อประสบการณ์ผู้ใช้ที่ราบรื่นทั่วโลก

JavaScript Intl API: แนวทางปฏิบัติที่ดีที่สุดด้าน Internationalization สำหรับผู้ชมทั่วโลก

ในโลกที่เชื่อมต่อถึงกันในปัจจุบัน การสร้างเว็บแอปพลิเคชันที่ตอบสนองต่อผู้ชมทั่วโลกเป็นสิ่งสำคัญอย่างยิ่ง JavaScript Intl API มีเครื่องมือที่ทรงพลังสำหรับ Internationalization (i18n) ซึ่งช่วยให้คุณสามารถจัดรูปแบบวันที่ ตัวเลข สกุลเงิน และอื่นๆ ตามแบบแผนของแต่ละท้องถิ่น (locale) บทความนี้จะสำรวจแนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ประโยชน์จาก Intl API เพื่อสร้างแอปพลิเคชันระดับโลกอย่างแท้จริง

ทำความเข้าใจ Internationalization (i18n) และ Localization (l10n)

ก่อนที่จะลงลึกในรายละเอียดของ Intl API สิ่งสำคัญคือต้องเข้าใจความแตกต่างระหว่าง Internationalization (i18n) และ Localization (l10n) I18n คือกระบวนการออกแบบและพัฒนาแอปพลิเคชันในลักษณะที่สามารถปรับให้เข้ากับภาษาและภูมิภาคต่างๆ ได้ง่ายโดยไม่จำเป็นต้องเปลี่ยนแปลงทางวิศวกรรม ในทางกลับกัน L10n คือกระบวนการปรับแอปพลิเคชันที่ทำ Internationalization แล้วให้เข้ากับท้องถิ่น (locale) ที่เฉพาะเจาะจงโดยการแปลข้อความและปรับแต่งองค์ประกอบอื่นๆ ที่เฉพาะเจาะจงสำหรับท้องถิ่นนั้นๆ

Intl API มุ่งเน้นไปที่ด้าน i18n โดยเป็นกลไกสำหรับการจัดการข้อมูลที่ไวต่อ locale ในขณะที่ localization โดยทั่วไปจะเกี่ยวข้องกับการจัดหาคำแปลและการกำหนดค่าเฉพาะของ locale

องค์ประกอบหลักของ Intl API

Intl API ประกอบด้วยอ็อบเจกต์หลักหลายตัว ซึ่งแต่ละตัวรับผิดชอบในการจัดการด้านต่างๆ ของ internationalization:

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ Intl API

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

1. ระบุ Locale ที่ถูกต้อง

รากฐานของ internationalization คือการระบุ locale ที่ถูกต้อง locale จะระบุภาษา ภูมิภาค และรูปแบบเฉพาะต่างๆ ที่จะใช้สำหรับการจัดรูปแบบ คุณสามารถรับ locale ที่ผู้ใช้ต้องการได้จากพร็อพเพอร์ตี้ navigator.language หรือเฮดเดอร์ Accept-Language ของ HTTP

เมื่อสร้างอ็อบเจกต์ Intl คุณสามารถระบุ locale เป็นสตริงหรืออาร์เรย์ของสตริงได้ หากคุณระบุเป็นอาร์เรย์ API จะพยายามค้นหา locale ที่ตรงกันที่สุดจากตัวเลือกที่มีอยู่

ตัวอย่าง:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

หาก locale ที่ผู้ใช้ต้องการไม่มีให้บริการ คุณสามารถระบุ locale สำรองได้ ตัวอย่างเช่น คุณอาจใช้ 'en-US' เป็นค่าเริ่มต้นหากเบราว์เซอร์ของผู้ใช้รายงาน locale ที่ไม่รองรับ

2. ใช้ประโยชน์จาก Intl.DateTimeFormat สำหรับการจัดรูปแบบวันที่และเวลา

การจัดรูปแบบวันที่และเวลาให้ถูกต้องเป็นสิ่งสำคัญอย่างยิ่งในการมอบประสบการณ์ที่ปรับให้เข้ากับท้องถิ่น อ็อบเจกต์ Intl.DateTimeFormat ช่วยให้คุณสามารถจัดรูปแบบวันที่และเวลาตามแบบแผนของ locale ที่เฉพาะเจาะจงได้

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

ตัวอย่าง:

const locale = 'de-DE'; // ภาษาเยอรมัน (เยอรมนี)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // ผลลัพธ์: เช่น "22. Mai 2024, 14:30"
console.log(formattedDate);

ตัวอย่างนี้จัดรูปแบบวันที่และเวลาปัจจุบันตาม locale ของเยอรมัน (เยอรมนี) ซึ่งรวมถึงปี เดือน วัน ชั่วโมง และนาที นอกจากนี้ยังระบุไทม์โซน 'Europe/Berlin' ด้วย

โปรดจำไว้ว่าต้องพิจารณารูปแบบวันที่และเวลาที่แตกต่างกันทั่วโลก ตัวอย่างเช่น สหรัฐอเมริกาใช้ MM/DD/YYYY ในขณะที่ประเทศอื่นๆ ส่วนใหญ่ใช้ DD/MM/YYYY

3. ใช้ Intl.NumberFormat สำหรับการจัดรูปแบบตัวเลข สกุลเงิน และเปอร์เซ็นต์

อ็อบเจกต์ Intl.NumberFormat เป็นวิธีที่ยืดหยุ่นในการจัดรูปแบบตัวเลข สกุลเงิน และเปอร์เซ็นต์ตามแบบแผนเฉพาะของ locale คุณสามารถปรับแต่งการจัดรูปแบบได้โดยระบุตัวเลือกต่างๆ เช่น สกุลเงิน สไตล์ (ทศนิยม สกุลเงิน หรือเปอร์เซ็นต์) จำนวนหลักทศนิยมน้อยที่สุดและมากที่สุด และอื่นๆ

ตัวอย่าง (การจัดรูปแบบสกุลเงิน):

const locale = 'ja-JP'; // ภาษาญี่ปุ่น (ญี่ปุ่น)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // ผลลัพธ์: เช่น "￥12,346"
console.log(formattedAmount);

ตัวอย่างนี้จัดรูปแบบตัวเลข 12345.67 เป็นสกุลเงินเยนญี่ปุ่น (JPY) สังเกตว่าสัญลักษณ์สกุลเงิน (￥) และตัวคั่นกลุ่ม (,) จะถูกปรับโดยอัตโนมัติตาม locale ของญี่ปุ่น

ตัวอย่าง (การจัดรูปแบบเปอร์เซ็นต์):

const locale = 'ar-EG'; // ภาษาอาหรับ (อียิปต์)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // ผลลัพธ์: เช่น "٧٥٫٠٠٪"
console.log(formattedPercentage);

ตัวอย่างนี้จัดรูปแบบตัวเลข 0.75 เป็นเปอร์เซ็นต์ในภาษาอาหรับ (อียิปต์) ผลลัพธ์จะรวมถึงเครื่องหมายเปอร์เซ็นต์ภาษาอาหรับ (٪) และทศนิยมสองตำแหน่ง

ข้อควรพิจารณาที่สำคัญสำหรับการจัดรูปแบบสกุลเงิน:

4. จัดการพหูพจน์อย่างถูกต้องด้วย Intl.PluralRules

กฎพหูพจน์มีความแตกต่างกันอย่างมากในแต่ละภาษา ตัวอย่างเช่น ภาษาอังกฤษมีกฎง่ายๆ ที่มีรูปแบบเอกพจน์และพหูพจน์ ในขณะที่ภาษาอื่นๆ มีกฎที่ซับซ้อนกว่าโดยขึ้นอยู่กับค่าของตัวเลข อ็อบเจกต์ Intl.PluralRules ช่วยให้คุณสามารถกำหนดรูปแบบพหูพจน์ที่ถูกต้องสำหรับตัวเลขและ locale ที่กำหนดได้

ตัวอย่าง:

const locale = 'ru-RU'; // ภาษารัสเซีย (รัสเซีย)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (เอกพจน์)
    case 'few': return 'товара'; // tovara (น้อย)
    case 'many': return 'товаров'; // tovarov (มาก)
    default: return 'товаров'; // ค่าเริ่มต้นเป็นมาก
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // ผลลัพธ์: "5 товаров"

ตัวอย่างนี้สาธิตวิธีการใช้ Intl.PluralRules เพื่อให้ได้รูปแบบพหูพจน์ที่ถูกต้องสำหรับคำว่า "товар" (item) ในภาษารัสเซีย ภาษารัสเซียมีรูปแบบพหูพจน์ที่แตกต่างกันไปขึ้นอยู่กับว่าตัวเลขลงท้ายด้วย 1, 2-4 หรือ 5-9

5. จัดรูปแบบรายการด้วย Intl.ListFormat

เมื่อนำเสนอรายการต่างๆ การจัดรูปแบบอาจแตกต่างกันไปในแต่ละ locale อ็อบเจกต์ Intl.ListFormat ช่วยให้คุณสามารถจัดรูปแบบรายการตามแบบแผนเฉพาะของ locale รวมถึงการใช้คำสันธานที่แตกต่างกัน (เช่น "and", "or") และตัวคั่นรายการ (เช่น จุลภาค, อัฒภาค)

ตัวอย่าง:

const locale = 'es-ES'; // ภาษาสเปน (สเปน)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // ผลลัพธ์: "manzanas, naranjas y plátanos"
console.log(formattedList);

ตัวอย่างนี้จัดรูปแบบรายการผลไม้ในภาษาสเปน (สเปน) โดยใช้คำสันธาน "y" (and) เพื่อเชื่อมรายการสองรายการสุดท้าย

6. จัดรูปแบบเวลาแบบสัมพัทธ์ด้วย Intl.RelativeTimeFormat

การแสดงเวลาแบบสัมพัทธ์ (เช่น "เมื่อวานนี้", "ในอีก 2 ชั่วโมง") เป็นวิธีที่ใช้งานง่ายในการนำเสนอข้อมูลเวลา อ็อบเจกต์ Intl.RelativeTimeFormat ช่วยให้คุณสามารถจัดรูปแบบเวลาแบบสัมพัทธ์ตามแบบแผนเฉพาะของ locale ได้

ตัวอย่าง:

const locale = 'fr-CA'; // ภาษาฝรั่งเศส (แคนาดา)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // ผลลัพธ์: "hier"
console.log(rtf.format(2, 'day')); // ผลลัพธ์: "dans 2 jours"

ตัวอย่างนี้จัดรูปแบบเวลาแบบสัมพัทธ์ในภาษาฝรั่งเศส (แคนาดา) ผลลัพธ์แสดง "hier" (เมื่อวานนี้) และ "dans 2 jours" (ในอีก 2 วัน)

ตัวเลือก `numeric` ควบคุมวิธีการแสดงตัวเลข `'auto'` จะแสดงคำแบบสัมพัทธ์เมื่อมี (เช่น "yesterday") และแสดงเป็นตัวเลขในกรณีอื่นๆ ส่วน `'always'` จะแสดงตัวเลขเสมอ

7. เรียงลำดับสตริงด้วย Intl.Collator

การเปรียบเทียบสตริงนั้นไวต่อ locale วิธีการเรียงลำดับสตริงจะแตกต่างกันไปขึ้นอยู่กับภาษา ตัวอย่างเช่น ในภาษาเยอรมัน อักขระ "ä" โดยทั่วไปจะถูกจัดเรียงเหมือน "a" ในขณะที่ในภาษาสวีเดนจะถูกจัดเรียงไว้หลัง "z" อ็อบเจกต์ `Intl.Collator` ช่วยให้คุณสามารถเปรียบเทียบสตริงตามกฎของ locale ที่เฉพาะเจาะจงได้

ตัวอย่าง:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // ผลลัพธ์: ["äpfel", "aprikosen", "bananen", "birnen"]

ตัวอย่างนี้เรียงลำดับอาร์เรย์ของคำภาษาเยอรมันโดยใช้ Intl.Collator สังเกตว่า "äpfel" ถูกจัดเรียงก่อน "aprikosen" แม้ว่า "ä" จะมาทีหลังในลำดับตัวอักษร

8. จัดการกรณีพิเศษและข้อมูลที่ขาดหายไป

ไม่ใช่ทุก locale ที่จะได้รับการสนับสนุนจากทุกเบราว์เซอร์หรือสภาพแวดล้อม จำเป็นอย่างยิ่งที่จะต้องจัดการกรณีพิเศษที่ไม่มี locale หรือเมื่อข้อมูลขาดหายไป พิจารณากลยุทธ์ต่อไปนี้:

9. ทดสอบอย่างละเอียดด้วย Locale ที่แตกต่างกัน

การทดสอบอย่างละเอียดเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าแอปพลิเคชันที่ทำ internationalization ของคุณทำงานได้อย่างถูกต้องสำหรับ locale ที่รองรับทั้งหมด ทดสอบแอปพลิเคชันของคุณด้วย locale ที่หลากหลาย รวมถึงภาษาที่ใช้ชุดอักขระ รูปแบบวันที่และเวลา รูปแบบตัวเลข และกฎพหูพจน์ที่แตกต่างกัน

พิจารณาใช้เครื่องมือทดสอบอัตโนมัติเพื่อตรวจสอบว่าแอปพลิเคชันของคุณทำงานตามที่คาดไว้ใน locale ต่างๆ

10. พิจารณาผลกระทบด้านประสิทธิภาพ

แม้ว่าโดยทั่วไปแล้ว Intl API จะมีประสิทธิภาพ แต่การสร้างอ็อบเจกต์ Intl อาจมีค่าใช้จ่ายค่อนข้างสูง เพื่อเพิ่มประสิทธิภาพ ให้พิจารณาสิ่งต่อไปนี้:

นอกเหนือจาก Intl API: ข้อควรพิจารณาเพิ่มเติมสำหรับ Internationalization

แม้ว่า Intl API จะมีเครื่องมือที่ทรงพลังสำหรับการจัดรูปแบบข้อมูล แต่ internationalization ยังเกี่ยวข้องมากกว่าแค่การจัดรูปแบบ พิจารณาประเด็นเพิ่มเติมต่อไปนี้:

สรุป

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