Sự khác biệt giữa encodeURI và encodeURIComponent trong JavaScript

2837

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.

  5 cách chia một mảng lớn thành nhiều mảng nhỏ trong Javascript

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ừ: -_.!~*'()
  Sử dụng thuật toán quay lui giải bài toán phân tích số bằng JavaScript

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

RELATED ARTICLESMORE FROM AUTHOR