PJCHENder 未整理筆記

[WebAPIs] URL 與 URLSearchParams API

2018-08-31

[WebAPIs] URL 與 URLSearchParams API

@(JavaScript)[JavaScript, WebAPIs]

keywords: URL, URLSearchParams, query string, params

URL 物件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 物件

1
2
3
4
5
6
7
8
9
10
11
12
// 方法一:直接代入 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 可使用的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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() 方法直接轉換成字串:

1
2
3
4
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
}

參考

Tags: WebAPIs

掃描二維條碼,分享此文章