Mã hóa URL trong JavaScript — encodeURI, encodeURIComponent và các Thực hành Tốt nhất

JavaScript cung cấp hai hàm tích hợp sẵn để mã hóa URL:

encodeURIComponent()

Mã hóa tất cả các ký tự ngoại trừ: A-Z a-z 0-9 - _ . ! ~ * ' ( )

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

Sử dụng hàm này để mã hóa các giá trị tham số truy vấn riêng lẻ, phân đoạn đường dẫn hoặc bất kỳ dữ liệu nào trở thành một phần của URL.

encodeURI()

Mã hóa tất cả các ký tự ngoại trừ các ký tự trên cộng với các ký tự URL dành riêng: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

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

Sử dụng hàm này khi mã hóa một chuỗi URL hoàn chỉnh.

Lỗi Thường gặp

// SAI — phá vỡ cấu trúc URL
encodeURIComponent('https://example.com/page')
// https%3A%2F%2Fexample.com%2Fpage

// ĐÚNG — giữ nguyên cấu trúc
encodeURI('https://example.com/page')
// https://example.com/page

Hãy kiểm tra trực tiếp các hàm này với công cụ mã hóa/giải mã URL.