คู่มือ URL Encoding และ Decoding

URL encoding หรือที่รู้จักกันในชื่อ percent encoding เป็นกลไกสำหรับการเข้ารหัสข้อมูลใน Uniform Resource Identifier (URI) ในบางสถานการณ์ เป็นแนวคิดพื้นฐานในการพัฒนาเว็บที่นักพัฒนาทุกคนควรเข้าใจ

ทำไมต้องใช้ URL Encoding?

URL สามารถส่งผ่านอินเทอร์เน็ตได้เฉพาะโดยใช้ชุดอักขระ ASCII เท่านั้น เนื่องจาก URL มักมีอักขระนอกชุดนี้ จึงต้องเข้ารหัสก่อน นอกจากนี้ อักขระ ASCII บางตัวมีความหมายพิเศษใน URL และต้องเข้ารหัสเมื่อใช้เป็นข้อมูล

อักขระพิเศษ (Reserved Characters)

อักขระเหล่านี้มีความหมายพิเศษใน URL และต้องเข้ารหัสเมื่อใช้เป็นข้อมูล:

อักขระ	รหัส	ความหมายใน URL
&	%26	ตัวคั่น query string
=	%3D	ตัวคั่น key-value
?	%3F	เริ่มต้น query string
#	%23	Fragment identifier
/	%2F	ตัวคั่น path
	%20 หรือ +	เว้นวรรค

วิธีการทำงานของ Percent Encoding

อักขระที่เข้ารหัสด้วย percent คือ % ตามด้วยตัวเลข hexadecimal 2 ตัว:

เว้นวรรค → %20
A → %41
! → %21

การเข้ารหัสในภาษาต่างๆ

JavaScript

// เข้ารหัส URI component (สำหรับค่า query)
encodeURIComponent("สวัสดีชาวโลก & มากกว่านั้น!")
// ผลลัพธ์: "%E0%B8%AA%E0%B8%A7%E0%B8%B1%E0%B8%AA%E0%B8%94%E0%B8%B5..."

// ถอดรหัส
decodeURIComponent("%E0%B8%AA%E0%B8%A7%E0%B8%B1%E0%B8%AA%E0%B8%94%E0%B8%B5")
// ผลลัพธ์: "สวัสดี"

Python

from urllib.parse import quote, unquote, urlencode

# เข้ารหัส
encoded = quote("สวัสดีชาวโลก!")
print(encoded)

# ถอดรหัส
decoded = unquote(encoded)
print(decoded)  # สวัสดีชาวโลก!

# เข้ารหัส query parameters
params = {'q': 'สวัสดี', 'page': 1}
encoded_params = urlencode(params)
print(encoded_params)

ข้อผิดพลาดที่พบบ่อย

Double Encoding

หลีกเลี่ยงการเข้ารหัส URL ที่เข้ารหัสแล้ว:

// ผิด - เข้ารหัสซ้ำซ้อน
const url = encodeURIComponent(encodeURIComponent("สวัสดี"));
// ผลลัพธ์: "สวัสดี" ที่เข้ารหัสผิด

// ถูก - เข้ารหัสครั้งเดียว
const url = encodeURIComponent("สวัสดี");

ใช้ฟังก์ชันการเข้ารหัสที่ถูกต้อง

• ใช้ encodeURIComponent() สำหรับค่า query parameter แต่ละตัว
• ใช้ encodeURI() สำหรับ URL ทั้งหมด
• อย่าใช้ escape() (deprecated แล้ว)

ลองใช้งานได้เลย

ใช้ เครื่องมือ URL Encoder/Decoder ของเราเพื่อเข้ารหัสและถอดรหัส URL ได้ทันทีในเบราว์เซอร์

เครื่องมือที่เกี่ยวข้อง

• Base64 Encoder — เข้ารหัสและถอดรหัสสตริง Base64
• HTML Encoder — เข้ารหัสอักขระพิเศษ HTML
• API Client — ทดสอบ API ด้วย URL parameters