การเข้ารหัส URL ใน JavaScript — encodeURI, encodeURIComponent และแนวปฏิบัติที่ดีที่สุด

JavaScript มีฟังก์ชันในตัวสองฟังก์ชันสำหรับการเข้ารหัส URL:

encodeURIComponent()

เข้ารหัสอักขระทั้งหมดยกเว้น: A-Z a-z 0-9 - _ . ! ~ * ' ( )

const name = 'John Doe'
const query = '?name=' + encodeURIComponent(name)
// ?name=John%20Doe

ใช้สำหรับการเข้ารหัสค่าพารามิเตอร์ query แต่ละตัว, ส่วนของ path หรือข้อมูลใด ๆ ที่กลายเป็นส่วนหนึ่งของ URL

encodeURI()

เข้ารหัสอักขระทั้งหมดยกเว้นข้างต้นรวมถึงอักขระ URL ที่สงวนไว้: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

const url = 'https://example.com/search?q=hello world'
const encoded = encodeURI(url)
// https://example.com/search?q=hello%20world

ใช้เมื่อเข้ารหัสสตริง URL แบบสมบูรณ์

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

// ผิด — ทำลายโครงสร้าง URL
encodeURIComponent('https://example.com/page')
// https%3A%2F%2Fexample.com%2Fpage

// ถูกต้อง — รักษาโครงสร้าง
encodeURI('https://example.com/page')
// https://example.com/page

ทดสอบฟังก์ชันเหล่านี้แบบสดด้วย เครื่องมือ URL encoder/decoder ของเรา