encodeURIComponent()

Try it

// Encodes characters such as ?,=,/,&,:
console.log(`?x=${encodeURIComponent("test?")}`);
// Expected output: "?x=test%3F"

console.log(`?x=${encodeURIComponent("шеллы")}`);
// Expected output: "?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"

Cú pháp

encodeURIComponent(uriComponent)

Tham số

uriComponent

Một chuỗi được mã hóa dưới dạng thành phần URI (một đường dẫn, chuỗi truy vấn, fragment, v.v.). Các giá trị khác được chuyển đổi thành chuỗi.

Giá trị trả về

Một chuỗi mới biểu thị uriComponent đã cho được mã hóa dưới dạng thành phần URI.

Ngoại lệ

URIError

Được ném ra nếu uriComponent chứa lone surrogate.

Mô tả

encodeURIComponent() là thuộc tính hàm của đối tượng toàn cục.

encodeURIComponent() sử dụng cùng thuật toán mã hóa như được mô tả trong encodeURI(). Nó thoát tất cả các ký tự ngoại trừ:

A–Z a–z 0–9 - _ . ! ~ * ' ( )

So với encodeURI(), encodeURIComponent() thoát một tập ký tự lớn hơn. Sử dụng encodeURIComponent() trên các trường nhập liệu của người dùng từ biểu mẫu được gửi đến máy chủ — điều này sẽ mã hóa các ký hiệu & có thể vô tình được tạo ra trong quá trình nhập dữ liệu cho character references hoặc các ký tự khác yêu cầu mã hóa/giải mã. Ví dụ, nếu người dùng viết Jack & Jill, không có encodeURIComponent(), dấu và có thể được máy chủ hiểu là bắt đầu của một trường mới và làm hỏng tính toàn vẹn của dữ liệu.

Đối với application/x-www-form-urlencoded, các dấu cách cần được thay thế bằng +, vì vậy bạn có thể muốn thực hiện thêm một bước thay thế %20 bằng + sau khi gọi encodeURIComponent().

Ví dụ

Mã hóa cho tiêu đề Content-Disposition và Link

Ví dụ sau cung cấp mã hóa đặc biệt cần thiết trong các tham số tiêu đề phản hồi máy chủ UTF-8 Content-Disposition và Link (ví dụ: tên tệp UTF-8):

const fileName = "my file(2).txt";
const header = `Content-Disposition: attachment; filename*=UTF-8''${encodeRFC5987ValueChars(
  fileName,
)}`;

console.log(header);
// "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"

function encodeRFC5987ValueChars(str) {
  return (
    encodeURIComponent(str)
      // The following creates the sequences %27 %28 %29 %2A (Note that
      // the valid encoding of "*" is %2A, which necessitates calling
      // toUpperCase() to properly encode). Although RFC3986 reserves "!",
      // RFC5987 does not, so we do not need to escape it.
      .replace(
        /['()*]/g,
        (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
      )
      // The following are not required for percent-encoding per RFC5987,
      // so we can allow for a little better readability over the wire: |`^
      .replace(/%(7C|60|5E)/g, (str, hex) =>
        String.fromCharCode(parseInt(hex, 16)),
      )
  );
}

Mã hóa theo RFC3986

RFC3986 mới hơn dành riêm !, ', (, ), và *, ngay cả khi các ký tự này không có mục đích phân định URI chính thức. Hàm sau mã hóa một chuỗi theo định dạng thành phần URL tuân thủ RFC3986. Nó cũng mã hóa [ và ], là một phần của cú pháp URI IPv6. Triển khai encodeURI tuân thủ RFC3986 không nên thoát chúng, như được minh họa trong ví dụ encodeURI().

function encodeRFC3986URIComponent(str) {
  return encodeURIComponent(str).replace(
    /[!'()*]/g,
    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
  );
}

Mã hóa lone surrogate ném lỗi

URIError sẽ được ném ra nếu cố gắng mã hóa một surrogate không phải là một phần của cặp high-low. Ví dụ:

// High-low pair OK
encodeURIComponent("\uD800\uDFFF"); // "%F0%90%8F%BF"

// Lone high-surrogate code unit throws "URIError: malformed URI sequence"
encodeURIComponent("\uD800");

// Lone high-surrogate code unit throws "URIError: malformed URI sequence"
encodeURIComponent("\uDFFF");

Bạn có thể sử dụng String.prototype.toWellFormed(), thay thế các lone surrogate bằng ký tự thay thế Unicode (U+FFFD), để tránh lỗi này. Bạn cũng có thể sử dụng String.prototype.isWellFormed() để kiểm tra xem một chuỗi có chứa lone surrogate trước khi truyền nó vào encodeURIComponent().

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• decodeURI()
• encodeURI()
• decodeURIComponent()