เมธอด toLocaleString() ใน JavaScript: แปลงวันที่/ตัวเลขเป็นสตริงตาม Locale

เมธอด toLocaleString() ใช้สำหรับ แปลง Date หรือ Number เป็นสตริงตามรูปแบบ Locale (ภาษา/ภูมิภาค) โดยอัตโนมัติ

ไวยากรณ์ (Syntax)

// Date
dateObj.toLocaleString([locales[, options]])

// Number
numberObj.toLocaleString([locales[, options]])

// Array (เรียก toString ของแต่ละองค์ประกอบ)
array.toLocaleString([locales[, options]])

พารามิเตอร์หลัก

• locales - รหัสภาษา/ภูมิภาค (BCP 47) เช่น 'th-TH', 'en-US', 'ja-JP'
• options - อ็อบเจกต์กำหนดรูปแบบรายละเอียด (dateStyle, timeStyle, currency, ฯลฯ)

รหัส Locale ตัวอย่าง

ตัวอย่างการใช้งานกับ Date

ตัวอย่างที่ 1: แสดงวันที่/เวลาตาม Locale

<!DOCTYPE html>
<html>
<body>
  <h2>แสดงวันที่/เวลา</h2>
  <button onclick="display()">แสดงวันที่ปัจจุบัน</button>
  <p id="demo"></p>
  <script>
    function display() {
      const d = new Date();
      document.getElementById("demo").innerHTML = 
        "Default: " + d.toLocaleString() + "<br>" +
        "ไทย (th-TH): " + d.toLocaleString('th-TH') + "<br>" +
        "สหรัฐ (en-US): " + d.toLocaleString('en-US') + "<br>" +
        "ญี่ปุ่น (ja-JP): " + d.toLocaleString('ja-JP') + "<br>" +
        "อังกฤษ UK (en-GB): " + d.toLocaleString('en-GB');
    }
  </script>
</body>
</html>

ตัวอย่างที่ 2: ใช้ Options ปรับรูปแบบ

const date = new Date('2024-01-15T10:30:00');

// Date only
date.toLocaleString('th-TH', {dateStyle: 'full'});     // "วันจันทร์ที่ 15 มกราคม พ.ศ. 2567"
date.toLocaleString('th-TH', {dateStyle: 'long'});      // "15 มกราคม 2567"
date.toLocaleString('th-TH', {dateStyle: 'short'});     // "15/1/2567"

// Time only
date.toLocaleString('th-TH', {timeStyle: 'short'});     // "10:30"
date.toLocaleString('th-TH', {timeStyle: 'long'});      // "10:30:00 น. GMT+7"

// Date + Time
date.toLocaleString('th-TH', {dateStyle: 'medium', timeStyle: 'short'});
// "15 ม.ค. 2567, 10:30"

// Custom format
date.toLocaleString('th-TH', {
  year: 'numeric', month: 'long', day: 'numeric',
  hour: '2-digit', minute: '2-digit', hour12: false
}); // "15 มกราคม 2567, 10:30"

ตัวอย่างการใช้งานกับ Number

const num = 1234567.89;

num.toLocaleString('th-TH');        // "1,234,567.89" (ไทยใช้คอมม่า/จุดเหมือน US)
num.toLocaleString('en-US');        // "1,234,567.89"
num.toLocaleString('de-DE');        // "1.234.567,89" (เยอรมันสลับคอมม่า/จุด)
num.toLocaleString('ja-JP');        // "1,234,567.89"

// สกุลเงิน
num.toLocaleString('th-TH', {style: 'currency', currency: 'THB'}); // "฿1,234,567.89"
num.toLocaleString('en-US', {style: 'currency', currency: 'USD'}); // "$1,234,567.89"
num.toLocaleString('ja-JP', {style: 'currency', currency: 'JPY'}); // "￥1,234,568" (ไม่มีทศนิยม)

// ร้อยละ
(0.1234).toLocaleString('th-TH', {style: 'percent'}); // "12.34%"

ตัวอย่างการใช้งานกับ Array

const arr = [1, 2, 3, 'hello', new Date('2024-01-15')];

arr.toLocaleString();           // ใช้ locale เริ่มต้นของระบบ
arr.toLocaleString('th-TH');    // "1,2,3,hello,15/1/2567, 10:30:00"
arr.toLocaleString('en-US');    // "1,2,3,hello,1/15/2024, 10:30:00 AM"

สรุป

• Date.toLocaleString() - แสดงวันที่/เวลาตามวัฒนธรรมผู้ใช้
• Number.toLocaleString() - แสดงตัวเลข/สกุลเงิน/ร้อยละตาม Locale
• Array.toLocaleString() - เรียก toLocaleString ของแต่ละองค์ประกอบแล้ว join ด้วยคอมม่า
• ใช้ options เพื่อควบคุมรูปแบบรายละเอียด (dateStyle, timeStyle, currency, etc.)