Sự khác biệt giữa encodeURI và encodeURIComponent trong JavaScript
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ụngencodeURIComponent()
. 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
- J Jest là gì? Hướng dẫn thực hiện kiểm thử JavaScript với Jest
- S Strict Mode trong JavaScript – Sử dụng Strict Mode như thế nào cho tốt?
- T Tìm hiểu về Intl.RelativeTimeFormat trong JavaScript
- K Kinh nghiệm xử lý câu lệnh điều kiện trong JavaScript
- C Các cách xóa một property của Object trong Javascript
- K Kinh nghiệm truy xuất giá trị trong object lồng nhau trong Javascript
- H Hằng số và tính bất biến trong JavaScript
- T Thư viện Driver.js tạo hướng dẫn tương tác trang web
- C Các tips hiệu quả nhất khi làm việc với Javascript
- C Chặng đường phát triển của Javascript từ ES6 đến ES12