Ví dụ mã hóa URL JavaScript – Cách sử dụng encodeURIcomponent() và encodeURI()


bạn có thể nghĩ rằng encodeURIencodeURIComponent làm điều tương tự, ít nhất là từ tên của họ. Và bạn có thể bối rối không biết nên sử dụng cái nào và khi nào.

Trong bài viết này, tôi sẽ làm sáng tỏ sự khác biệt giữa encodeURIencodeURIComponent.

URI là gì và nó khác với URL như thế nào?

URI là viết tắt của Mã định danh tài nguyên thống nhất.
URL là viết tắt của Bộ định vị tài nguyên thống nhất.

Bất cứ thứ gì xác định duy nhất một tài nguyên là URI của nó, chẳng hạn như id, tên hoặc số ISBN. Một URL chỉ định một tài nguyên và cách nó có thể được truy cập (giao thức). Tất cả các URL đều là URI, nhưng không phải tất cả URI đều là URL.

Tại sao chúng ta cần phải mã hóa?

URL chỉ có thể có một số ký tự nhất định từ bộ ASCII 128 ký tự tiêu chuẩn. Các ký tự dành riêng không thuộc bộ này phải được mã hóa.

Điều này có nghĩa là chúng ta cần mã hóa các ký tự này khi chuyển vào một URL. Các ký tự đặc biệt như &, space, ! khi nhập vào một url cần phải được thoát ra, nếu không chúng có thể gây ra những tình huống khó lường.

Đọc thêm  Khám phá Lập trình hàm trong JavaScript với phần giới thiệu kỹ lưỡng này

Trường hợp sử dụng:

  1. Người dùng đã gửi các giá trị trong một biểu mẫu có thể ở định dạng chuỗi và cần được chuyển vào, chẳng hạn như các trường URL.
  2. Cần chấp nhận tham số chuỗi truy vấn để thực hiện yêu cầu GET.

Sự khác biệt giữa encodeURI và encodeURIComponent là gì?

encodeURIencodeURIComponent được sử dụng để mã hóa Mã định danh tài nguyên đồng nhất (URI) bằng cách thay thế các ký tự nhất định bằng một, hai, ba hoặc bốn chuỗi thoát đại diện cho mã hóa UTF-8 của ký tự.

encodeURIComponent nên được sử dụng để mã hóa một URI Thành phần – một chuỗi được cho là một phần của URL.

encodeURI nên được sử dụng để mã hóa một URI hoặc một URL hiện có.

Đây là một bảng hữu ích về sự khác biệt trong mã hóa các ký tự

Những ký tự nào được mã hóa?

encodeURI() sẽ không mã hóa: [email protected]#$&*()=:/,;?+'

encodeURIComponent() sẽ không mã hóa: ~!*()'

Các nhân vật A-Z a-z 0-9 - _ . ! ~ * ' ( ) không được trốn thoát.

ví dụ

const url="https://www.twitter.com"

console.log(encodeURI(url))             //https://www.twitter.com
console.log(encodeURIComponent(url))    //https%3A%2F%2Fwww.twitter.com


const paramComponent="?q=search"
console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch"
console.log(url + encodeURIComponent(paramComponent)) //https://www.twitter.com%3Fq%3Dsearch

Khi nào mã hóa

  1. Khi chấp nhận một đầu vào có thể có dấu cách.

    encodeURI("http://www.mysite.com/a file with spaces.html") //http://www.mysite.com/a%20file%20with%20spaces.html
    
  2. Khi xây dựng một URL từ các tham số chuỗi truy vấn.

     let param = encodeURIComponent('mango')
     let url = "http://mysite.com/?search=" + param + "&length=99"; //http://mysite.com/?search=mango&length=99
    
    
  3. Khi chấp nhận các tham số truy vấn có thể có các ký tự dành riêng.

   let params = encodeURIComponent('mango & pineapple')
   let url = "http://mysite.com/?search=" + params; //http://mysite.com/?search=mango%20%26%20pineapple


Tóm lược

Nếu bạn có một URL hoàn chỉnh, hãy sử dụng encodeURI. Nhưng nếu bạn có một phần của URL, hãy sử dụng encodeURIComponent.


Quan tâm đến nhiều hướng dẫn và JSBytes từ tôi? Hãy đăng ký để nhận thư mới từ tôi. hoặc theo dõi tôi trên Twitter

Đọc thêm  Học ES6+ trong khóa học 23 phần tương tác và miễn phí này





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status