Phương thức append[]
của giao diện URLSearchParams
nối thêm một cặp khóa/giá trị được chỉ định làm tham số tìm kiếm mới
Như minh họa trong ví dụ bên dưới, nếu cùng một khóa được thêm vào nhiều lần thì khóa đó sẽ xuất hiện nhiều lần trong chuỗi tham số cho mỗi giá trị
Ghi chú. Tính năng này có sẵn trong Web Worker
append[name, value]
name
Tên của tham số để nối thêm
value
Giá trị của tham số để nối thêm
Không có [undefined
]
let url = new URL['//example.com?foo=1&bar=2'];
let params = new URLSearchParams[url.search];
//Add a second foo parameter.
params.append['foo', 4];
//Query string is now: 'foo=1&bar=2&foo=4'
Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu
- Các giao diện liên quan đến URL khác.
URL
,HTMLHyperlinkElementUtils
- Nhà phát triển Google. Thao tác URL dễ dàng với URLSearchParams
Tìm thấy một vấn đề nội dung với trang này?
- Chỉnh sửa trang trên Github
- Báo cáo vấn đề nội dung
- Xem nguồn trên GitHub
Trang này được sửa đổi lần cuối vào ngày 13 tháng 9 năm 2022 bởi những người đóng góp MDN
Có thể trực tiếp sử dụng một đối tượng triển khai URLSearchParams
trong cấu trúc
const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
0 để lặp qua các cặp khóa/giá trị theo cùng thứ tự như chúng xuất hiện trong chuỗi truy vấn, ví dụ: hai dòng sau đây là tương đươngfor [const [key, value] of mySearchParams] {}
for [const [key, value] of mySearchParams.entries[]] {}
Ghi chú. Tính năng này có sẵn trong Web Worker
const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
1Trả về một thể hiện đối tượng URLSearchParams
const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
3Nối một cặp khóa/giá trị được chỉ định làm thông số tìm kiếm mới
const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
4Xóa tham số tìm kiếm đã cho và giá trị được liên kết của nó khỏi danh sách tất cả các tham số tìm kiếm
const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
5Trả về một
const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
6 cho phép lặp qua tất cả các cặp khóa/giá trị có trong đối tượng này theo cùng thứ tự như chúng xuất hiện trong chuỗi truy vấnconst paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
7Cho phép lặp qua tất cả các giá trị có trong đối tượng này thông qua chức năng gọi lại
const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
8Trả về giá trị đầu tiên được liên kết với tham số tìm kiếm đã cho
const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
9Trả về tất cả các giá trị được liên kết với một tham số tìm kiếm đã cho
// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams[paramsObj];
console.log[searchParams.toString[]]; // "foo=bar&baz=bar"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // "bar"
0Trả về một giá trị boolean cho biết liệu một tham số đã cho có tồn tại hay không
// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams[paramsObj];
console.log[searchParams.toString[]]; // "foo=bar&baz=bar"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // "bar"
1Trả về một
const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
6 cho phép lặp qua tất cả các khóa của các cặp khóa/giá trị có trong đối tượng này// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams[paramsObj];
console.log[searchParams.toString[]]; // "foo=bar&baz=bar"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // "bar"
3Đặt giá trị được liên kết với tham số tìm kiếm đã cho thành giá trị đã cho. Nếu có một số giá trị, những giá trị khác sẽ bị xóa
// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams[paramsObj];
console.log[searchParams.toString[]]; // "foo=bar&baz=bar"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // "bar"
4Sắp xếp tất cả các cặp khóa/giá trị, nếu có, theo khóa của chúng
// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams[paramsObj];
console.log[searchParams.toString[]]; // "foo=bar&baz=bar"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // "bar"
5Trả về một chuỗi chứa chuỗi truy vấn phù hợp để sử dụng trong một URL
// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams[paramsObj];
console.log[searchParams.toString[]]; // "foo=bar&baz=bar"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // "bar"
6Trả về một
const paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
6 cho phép lặp qua tất cả các giá trị của các cặp khóa/giá trị có trong đối tượng nàyconst paramsString = 'q=URLUtils.searchParams&topic=api';
const searchParams = new URLSearchParams[paramsString];
// Iterating the search parameters
for [const p of searchParams] {
console.log[p];
}
console.log[searchParams.has['topic']]; // true
console.log[searchParams.get['topic'] === "api"]; // true
console.log[searchParams.getAll['topic']]; // ["api"]
console.log[searchParams.get['foo'] === null]; // true
console.log[searchParams.append['topic', 'webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log[searchParams.set['topic', 'More webdev']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams&topic=More+webdev"
console.log[searchParams.delete['topic']];
console.log[searchParams.toString[]]; // "q=URLUtils.searchParams"
// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams[paramsObj];
console.log[searchParams.toString[]]; // "foo=bar&baz=bar"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // "bar"
const paramStr = 'foo=bar&foo=baz';
const searchParams = new URLSearchParams[paramStr];
console.log[searchParams.toString[]]; // "foo=bar&foo=baz"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // bar, only returns the first value
console.log[searchParams.getAll['foo']]; // ["bar", "baz"]
Hàm tạo URLSearchParams
không phân tích cú pháp URL đầy đủ. Tuy nhiên, nó sẽ loại bỏ dấu đầu dòng
// Search parameters can also be an object
const paramsObj = {foo: 'bar', baz: 'bar'};
const searchParams = new URLSearchParams[paramsObj];
console.log[searchParams.toString[]]; // "foo=bar&baz=bar"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // "bar"
9 khỏi một chuỗi, nếu cóconst paramsString1 = '//example.com/search?query=%40';
const searchParams1 = new URLSearchParams[paramsString1];
console.log[searchParams1.has['query']]; // false
console.log[searchParams1.has['//example.com/search?query']]; // true
console.log[searchParams1.get['query']]; // null
console.log[searchParams1.get['//example.com/search?query']]; // "@" [equivalent to decodeURIComponent['%40']]
const paramsString2 = '?query=value';
const searchParams2 = new URLSearchParams[paramsString2];
console.log[searchParams2.has['query']]; // true
const url = new URL['//example.com/search?query=%40'];
const searchParams3 = new URLSearchParams[url.search];
console.log[searchParams3.has['query']]; // true
Hàm tạo URLSearchParams
diễn giải các dấu cộng [
const paramStr = 'foo=bar&foo=baz';
const searchParams = new URLSearchParams[paramStr];
console.log[searchParams.toString[]]; // "foo=bar&foo=baz"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // bar, only returns the first value
console.log[searchParams.getAll['foo']]; // ["bar", "baz"]
1] dưới dạng khoảng trắng, điều này có thể gây ra sự cốconst rawData = '\x13à\x17@\x1F\x80';
const base64Data = btoa[rawData]; // 'E+AXQB+A'
const searchParams = new URLSearchParams[`bin=${base64Data}`]; // 'bin=E+AXQB+A'
const binQuery = searchParams.get['bin']; // 'E AXQB A', '+' is replaced by spaces
console.log[atob[binQuery] === rawData]; // false
Bạn có thể tránh điều này bằng cách mã hóa dữ liệu bằng
const paramStr = 'foo=bar&foo=baz';
const searchParams = new URLSearchParams[paramStr];
console.log[searchParams.toString[]]; // "foo=bar&foo=baz"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // bar, only returns the first value
console.log[searchParams.getAll['foo']]; // ["bar", "baz"]
2const rawData = '\x13à\x17@\x1F\x80';
const base64Data = btoa[rawData]; // 'E+AXQB+A'
const encodedBase64Data = encodeURIComponent[base64Data]; // 'E%2BAXQB%2BA'
const searchParams = new URLSearchParams[`bin=${encodedBase64Data}`]; // 'bin=E%2BAXQB%2BA'
const binQuery = searchParams.get['bin']; // 'E+AXQB+A'
console.log[atob[binQuery] === rawData]; // true
URLSearchParams
không phân biệt giữa tham số không có gì sau
const paramStr = 'foo=bar&foo=baz';
const searchParams = new URLSearchParams[paramStr];
console.log[searchParams.toString[]]; // "foo=bar&foo=baz"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // bar, only returns the first value
console.log[searchParams.getAll['foo']]; // ["bar", "baz"]
4 và tham số không có hoàn toàn const paramStr = 'foo=bar&foo=baz';
const searchParams = new URLSearchParams[paramStr];
console.log[searchParams.toString[]]; // "foo=bar&foo=baz"
console.log[searchParams.has['foo']]; // true
console.log[searchParams.get['foo']]; // bar, only returns the first value
console.log[searchParams.getAll['foo']]; // ["bar", "baz"]
4