TextEncoder และ TextDecoder ใน JavaScript: เข้ารหัส/ถอดรหัส UTF-8

TextEncoder แปลงสตริง (String) เป็น Uint8Array (ไบต์) ตามมาตรฐาน UTF-8 เท่านั้น
TextDecoder ทำ العكس: แปลงไบต์ (Uint8Array, ArrayBuffer, DataView) กลับเป็นสตริง รองรับหลายเอนโคดิ้ง: UTF-8, UTF-16, ISO-8859-2, KOI8-R, GBK, ฯลฯ

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TextEncoder และ TextDecoder</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result, .sample { font-size: 18px; font-weight: 500; color: rebeccapurple; }
    .result { color: red; }
  </style>
</head>
<body>
  <h1>TextEncoder และ TextDecoder ใน JavaScript</h1>
  <div class="sample"></div>
  <button class="Btn">เข้ารหัส (Encode)</button>
  <div class="result"></div>
  <h3>กดเพื่อเข้ารหัสสตริง "Hello world"</h3>
  <div class="sample"></div>
  <button class="Btn">ถอดรหัส (Decode)</button>
  <div class="result"></div>
  <h3>กดเพื่อถอดรหัส Uint8Array [119, 111, 114, 108, 100]</h3>
  <script>
    const btnEle = document.querySelectorAll(".Btn");
    const sampleEle = document.querySelectorAll(".sample");
    const resEle = document.querySelectorAll(".result");
    const str = "Hello world";
    const bytes = new Uint8Array([119, 111, 114, 108, 100]); // "world"
    sampleEle[0].textContent = str;
    sampleEle[1].textContent = "[" + Array.from(bytes).join(", ") + "]";
    // Encode
    btnEle[0].addEventListener("click", () => {
      const encoder = new TextEncoder();
      const encoded = encoder.encode(str);
      resEle[0].textContent = "เข้ารหัสแล้ว: " + Array.from(encoded).join(", ");
    });
    // Decode
    btnEle[1].addEventListener("click", () => {
      const decoder = new TextDecoder("utf-8");
      const decoded = decoder.decode(bytes);
      resEle[1].textContent = "ถอดรหัสแล้ว: " + decoded;
    });
  </script>
</body>
</html>

ผลลัพธ์

เมื่อกด "เข้ารหัส":

เมื่อกด "ถอดรหัส":

การใช้งานจริง

• WebSocket / WebRTC: ส่งข้อมูลไบนารีผ่านเครือข่าย
• File API: อ่าน/เขียนไฟล์ด้วย encoding ที่กำหนด
• Crypto / Hashing: แปลงสตริงเป็นไบต์ก่อน hash (SHA-256 ฯลฯ)
• Stream API: TextDecoderStream, TextEncoderStream สำหรับสตรีมมิ่ง

ตัวเลือก TextDecoder

new TextDecoder("utf-8", { fatal: true, ignoreBOM: false });
// fatal: true → โยน Error ถ้าเจอไบต์ไม่ถูกต้อง (แทนที่จะแทนที่ด้วย )
// ignoreBOM: true → ข้าม Byte Order Mark

Streaming Decode (สำหรับข้อมูลขนาดใหญ่)

const decoder = new TextDecoder();
let result = "";
for (const chunk of byteChunks) {
  result += decoder.decode(chunk, { stream: true });
}
result += decoder.decode(); // flush ส่วนที่เหลือ