ความแตกต่างระหว่าง decodeURIComponent และ decodeURI ใน JavaScript

ทั้งคู่ใช้ถอดรหัส URL แต่ ขอบเขตการถอดรหัสต่างกัน

decodeURI()

ถอดรหัส URL ทั้งหมด ไม่ถอดรหัส Reserved Characters (; , / ? : @ & = + $ #) เพราะเป็นส่วนของโครงสร้าง URL

ตัวอย่างจากบทความ

<!DOCTYPE html>
<html>
  <body>
    <button onclick="display()">Check</button>
    <p id="demo"></p>
    <script>
      function display() {
        var uri = "welcome msg.jsp?name=\u00e5mit&sub=programming";
        var encode = encodeURI(uri);
        var decode = decodeURI(encode);
        var result = "Encode= " + encode + "<br>" + "Decode= " + decode;
        document.getElementById("demo").innerHTML = result;
      }
    </script>
  </body>
</html>

decodeURIComponent()

ถอดรหัส URL Component (ส่วนประกอบ) ถอดรหัส ทุกตัวอักษร รวมถึง Reserved Characters

ตัวอย่างจากบทความ

<!DOCTYPE html>
<html>
  <body>
    <button onclick="display()">Check</button>
    <p id="demo"></p>
    <script>
      function display() {
        var uri = "https://example.com/welcome msg.jsp?name=\u00e5mit&sub=programming";
        var encode = encodeURIComponent(uri);
        var decode = decodeURIComponent(encode);
        var result = "Encode= " + encode + "<br>" + "Decode= " + decode;
        document.getElementById("demo").innerHTML = result;
      }
    </script>
  </body>
</html>

ตารางเปรียบเทียบ

ตัวอย่างเปรียบเทียบจริง

const encoded = "https%3A%2F%2Fexample.com%2Fpath%20name%3Fkey%3Dvalue%26foo%3Dbar";

decodeURI(encoded);
// "https://example.com/path name?key=value&foo=bar"
// โครงสร้าง URL คงอยู่

decodeURIComponent(encoded);
// "https://example.com/path name?key=value&foo=bar"
// ผลลัพธ์เหมือนกันในกรณีนี้ เพราะไม่มี reserved char ที่เข้ารหัสอยู่

// แตกต่างชัดเจนเมื่อ decode query parameter value
const param = "hello%20world%26special%3Dchars";
// query value ที่มี & และ = เข้ารหัสไว้

decodeURI(param);           // "hello world&special=chars" - & และ = ไม่ถูกถอด
decodeURIComponent(param);  // "hello world&special=chars" - ถอดหมด

เมื่อไหร่ใช้ไหน?

ใช้ decodeURI() เมื่อ:

• มี URL เต็ม (มี protocol, domain, path, query)
• ต้องการรักษาโครงสร้าง URL (ไม่ให้ / ? & = กลายเป็น text)
• ใช้กับ window.location.href หรือ full URL string

ใช้ decodeURIComponent() เมื่อ:

• มี Query Parameter Value เดี่ยว (ได้จาก URLSearchParams.get() หรือ split manual)
• มี Path segment เดี่ยว
• ต้องการถอดรหัสหมดทุกตัว

Best Practice: ใช้ URL API (Modern)

const url = new URL('https://example.com/search?q=hello%20world&lang=th');

// ดึง query parameter (decode อัตโนมัติ)
url.searchParams.get('q');    // "hello world" ✓
url.searchParams.get('lang'); // "th" ✓

// ไม่ต้อง decode เองเลย!

Error Handling

function safeDecodeURI(uri) {
  try {
    return decodeURI(uri);
  } catch (e) {
    console.warn('Invalid URI:', uri);
    return uri;
  }
}

function safeDecodeURIComponent(uri) {
  try {
    return decodeURIComponent(uri);
  } catch (e) {
    console.warn('Invalid URI component:', uri);
    return uri;
  }
}

// ทดสอบ malformed
decodeURI('%E0%B8'); // URIError: malformed URI sequence