跳至主要内容

[WebAPIs] URL 與 URLSearchParams API

keywords: URL, URLSearchParams, query string, params

URL 物件

// new URL(<url>, <base>);

// 建立 URL 物件
new URL('https://www.google.com/foo'); // https://www.google.com/foo
new URL('bar', 'https://www.google.com/foo'); // https://www.google.com/bar

// 建立 Hash Tag
var url = new URL('https://example.com/path?foo=1&bar=2');
url.hash = 'hashTag';

// 取得 url 資訊
url.href; // "https://example.com/path?foo=1&bar=2"
url.hostname; // "example.com"
url.pathname; // "/path"
url.search; // "?foo=1&bar=2"
url.protocol; // "https:"

// 可以用的方法
url.toString(); // "https://example.com/path?foo=1&bar=2"

URL SearchParams

建立 URL SearchParams 物件

// 方法一:直接代入 URL
var url = new URL('https://example.com/path?foo=1&bar=2');
var qs = new URLSearchParams(url.search);

// 方法二:代入陣列
var qs = new URLSearchParams([
['foo', 1],
['bar', 2],
]);

// 方法三:代入物件
var qs = new URLSearchParams({ foo: 1, bar: 2 });

// 都會得到一樣的結果
qs.toString(); // "foo=1&bar=2"

設定 SearchParams 可使用的方法

var url = new URL('https://example.com/path');
var qs = new URLSearchParams();

// 添加 append(<key>, <value>),如果有重複的 key 仍然會繼續向後添加
qs.append('q', 'reactJS');
url.search = qs;
url.href; // "https://example.com/path?q=reactJS"

// 設定 set(<key>, <value>),如果有重複的 key,則會設定其中一個,其他的刪除
qs.set('q', 'Vue');
url.search = qs; // "https://example.com/path?q=Vue"
url.href;

// 刪除 delete(<key>)
qs.delete('q');
url.search = qs;
url.href; // "https://example.com/path"

取得 queryString 的內容

使用 toString() 方法直接轉換成字串:

var searchParams = new URLSearchParams('c=4&a=2&b=3&a=1');
searchParams.toString(); // 排序前:"c=4&a=2&b=3&a=1"
searchParams.sort(); // 排序所有 query string
searchParams.toString(); // 排序後:"a=2&a=1&b=3&c=4"

分別取得 key 和 value:

var qs = new URLSearchParams("k1=v1&k2=v2");

qs.get('k1'); // v1,不存在則得到 null
qs.has('k1'); // true,不存在則得到 false

[...qs] // 取得所有 key-value 的陣列

// qs.entries(),取得所有 key-value
for(let [key, value] of qs.entries()) {
console.log(`key: ${key}, value: ${value}`); // key: k1, value: v1
}

// qs.keys(),取得所有 key
for(let key of qs.keys()) {
console.log(`key:` ${key}); // k1
}

// qs.values(),取得所有 value
for(let value of qs.values()) {
console.log(`value:` ${value}); // v1
}

參考