Bài viết được sự cho phép của tác giả Phạm Bình
Mình đang viết một bài hướng dẫn sử dụng các hàm JavaScript cơ bản thì gặp phải vấn đề so sánh hai thằng encodeURI() và encodeURIComponent(). Mình có xem qua một vài ví dụ thì thấy nó cứ na ná giống nhau, vì vậy mình quyết định tìm hiểu ký xem chúng thật sự khác nhau chỗ nào.
Vâng, và sau khi phân biệt được, mình đã quyết định viết bài viết này để chia sẻ với các bạn.
I. Encodeuri() và Encodeuricomponent là gì?
Có thể là bạn đã biết rồi, encodeURI() và encodeURIComponent() được sử dụng khi bạn muốn mã hóa >URI từ các ký tự đặc biệt thành ký tự thường. Hay được sử dụng khi bạn muốn gửi một request có tham số mang giá trị là một url hoàn chỉnh.
Ví dụ. Mình có biến url mang giá trị https://phambinh.net?page=10, mình muốn gửi biến này lên server ở endpoint https://domain.com để xử lý theo method get.
Có thể bạn sẽ nghĩ đơn giản chỉ việc nối chuỗi như sau là đủ:
var url = "https://phambinh.net?page=10";
var endpoint = "https://domain.com?url=" + url;
Nhưng như vậy là chưa đủ, bởi biến url chứa các ký tự đặc biệt như /?. Nên khi nối vào endpoint, bạn sẽ nhận được kết quả thế này:
"https://domain.com?url=https://phambinh.net?page=10"
Đương nhiên với định dạng như trên, web server sẽ không nhận được giá trị của biến url như mong muốn.
Vì vậy mà chúng ta mới cần đến việc encode URI. Đoạn code trên nên được sửa lại như sau:
var url = "https://phambinh.net?page=10";
var endpoint = "https://domain.com?url=" + encodeURI(url);
Lưu ý: Đoạn code trên có sử dụng hàm encodeURI(), tuy nhiên mình vẫn chưa chắc chắn có chính xác hay không, hay là phải sử dụng encodeURIComponent(). Và đây cũng chính là lý do tại sao chúng ta cần bài viết này để phân biệt cách sử dụng chúng.
Tham khảo việc làm JavaScript tại Hồ Chí Minh trên TopDev
II. Sự khác biệt giữa Encodeuri() và Encodeuricomponent()
Không có gì khác biệt quá lớn. Điều tạo nên sự khác biệt nhất chính là:
encodeURI()mã hóa các ký tự đặc biệt, ngoại trừ:~!@#$&*()=:/,;?+encodeURIComponent()mã hóa các ký tự đặc biệt, ngoại trừ:-_.!~*'()
III. Khi nào thì Encodeuri() và khi nào dùng Encodeuricomponent()
Từ sự khác biệt mà mình trình bày ở trên, chúng ta thể rút ngay ra khi nào thì sử dụng encodeURI() và encodeURIComponent() như sau:
- Khi bạn muốn mã hóa một url đầy đủ (có cả phần http:// hay https://) thì dùng
encodeURI(), bởi nó sẽ không mã hóa các ký tự:/. - Khi bạn muốn mã hóa giá trị của tham số thì sử dụng
encodeURIComponent().
Vậy quay lại ví dụ ở phần I, mình sử dụng encodeURI() là sai, thay vào đó nên sử dụng encodeURIComponent(). Code cuối cùng sẽ là:
var url = "https://phambinh.net?page=10";
var endpoint = "https://domain.com?url=" + encodeURIComponent(url);
console.log(endpoint); // "https://domain.com?url=https%3A%2F%2Fphambinh.net%3Fpage%3D10"
IV. Tổng kết
Chỉ là một bài chia sẻ nhanh, hy vọng sẽ giúp ích cho các bạn trong quá trình >học lập trình JavaScript.
Bài viết gốc được đăng tải tại phambinh.net
Xem thêm các việc làm Developer hấp dẫn tại TopDev
Bài viết liên quan
7 sai lầm lớn khiến việc học Javascript như “nước đổ lá khoai”
Kỹ thuật tối ưu Javascript nhằm tăng tốc độ web gấp 2 lần
