URL & URLSearchParams Web API All In One

const url = new URL('https://www.xgqfrms.xyz/index.html?date=2022-03-20');

url;
/*
URL {origin: 'https://www.xgqfrms.xyz', protocol: 'https:', username: '', password: '', host: 'www.xgqfrms.xyz', …}hash: ""host: "www.xgqfrms.xyz"hostname: "www.xgqfrms.xyz"href: "https://www.xgqfrms.xyz/index.html?date=2022-03-20"origin: "https://www.xgqfrms.xyz"password: ""pathname: "/index.html"port: ""protocol: "https:"search: "?date=2022-03-20"searchParams: URLSearchParams[[Prototype]]: URLSearchParamsappend: ? append()delete: ? delete()entries: ? entries()forEach: ? forEach()get: ? ()getAll: ? getAll()has: ? has()keys: ? keys()set: ? ()sort: ? sort()toString: ? toString()values: ? values()constructor: ? URLSearchParams()Symbol(Symbol.iterator): ? entries()Symbol(Symbol.toStringTag): "URLSearchParams"[[Prototype]]: Objectusername: ""[[Prototype]]: URL
*/

url.searchParams;
// URLSearchParams {}

url.searchParams.entries();
// Iterator {}[[Prototype]]: Iterator
for (let param of url.searchParams) {
    console.log('param =', param);
}
// param = (2) ['date', '2022-03-20']

URL.searchParams

const urlSearchParams = url.searchParams

https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams

URLSearchParams

for (const [key, value] of mySearchParams) {
  //...
}

for (const [key, value] of mySearchParams.entries()) {
  //...
}

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

URLSearchParams 坑?

1. ? 前面有内容?

const paramsString1 = 'https://xgqfrms.xyz/search?query=%40';
const searchParams1 = new URLSearchParams(paramsString1);
for (let param of searchParams1) {
    console.log('param =', param);
}
// param = (2) ['https://xgqfrms.xyz/search?query', '@']

searchParams1.has('query'); 
// false ?
searchParams1.get('query');
// null ?

searchParams1.has('https://xgqfrms.xyz/search?query'); 
// true ?
searchParams1.get('https://xgqfrms.xyz/search?query');
// "@" === decodeURIComponent('%40')

2. ? 前面没有内容 ?

const paramsString2 = '?query=value';
const searchParams2 = new URLSearchParams(paramsString2);
for (let param of searchParams2) {
    console.log('param =', param);
}

// param = (2) ['query', 'value']
searchParams2.has('query'); 
// true
searchParams2.get('query');
// 'value'

3. url.search ?

const url = new URL('https://xgqfrms.xyz/search?query=%40');
// url.search === `?query=%40`
const searchParams3 = new URLSearchParams(url.search);
for (let param of searchParams3) {
    console.log('param =', param);
}
// param = (2) ['query', '@']

searchParams3.has('query');
// true
searchParams3.get('query');
// 'value'

demo

function getApiUrl() {
  const url = new URL('https://en.wikipedia.org/w/api.php');
  url.searchParams.set('action', 'query');
  url.searchParams.set('format', 'json');
  url.searchParams.set('generator', 'geosearch');
  url.searchParams.set('ggscoord', `${latitude}|${longitude}`);
  url.searchParams.set('ggslimit', 5);
  url.searchParams.set('ggsradius', 10000);
  url.searchParams.set('origin', '*');
  url.searchParams.set('pilimit', 50);
  url.searchParams.set('piprop', 'thumbnail');
  url.searchParams.set('pithumbsize', 144);
  url.searchParams.set('prop', 'pageimages|pageterms');
  url.searchParams.set('wbptterms', 'description');
  return url;
}

请试用 HTTP Cache codelab，在 Express 中了解 Cache-Control 和 ETag 的实践经验。

https://web.dev/codelab-http-cache/

https://web.dev/http-cache/

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！