The URL and URLSearchParams

URL

This is the 30th day of my participation in the August Text Challenge.More challenges in August

const url = new URL('https://www.example.com:8080/mock/foo/?s=url#foo')

console.log(url)
/ * = > {href: "https://www.example.com/mock/foo?s=url", - complete URL hash: '# foo' - contains the string '#' anchor point value of the host: "www.example.com:8080" -- Host address with port number hostname: "www.example.com" -- Host address without port number origin: "Https://www.example.com:8080", - contains protocol, domain name and port - read only attribute to the URL (change is not an error, but had no effect - silence) the pathname: "/mock/foo", -- the url path (after conversion will remove the final slash) port: "8080", -- the port number, if the default port number is not set, returns the empty string protocol: "HTTPS :", -- protocol, including the following colon search: "? S =url", -- query string, return empty string if no query string, sometimes return as? The initial string searchParams: the urlSearchParams object corresponding to the URL, which allows us to manipulate the query string} */
Copy the code

The basic use

let url = new URL(url, [base])
Copy the code

let base = 'https://www.example.com/study/a/b/c'

console.log(new URL('sp/icon', base).href) 
// => https://www.example.com/study/a/b/sp/icon

console.log(new URL('./sp/icon', base).href) 
// => https://www.example.com/study/a/b/sp/icon

// One URL level up
console.log(new URL('.. /sp/icon', base).href) 
// => https://www.example.com/study/a/sp/icon

// The hierarchy is calculated by a slash
console.log(new URL('.. /sp/icon', base + '/').href) 
// => https://www.example.com/study/a/b/sp/icon


// The leading slash indicates that the root address is matching
console.log(new URL('/sp/icon', base).href)
// => https://www.example.com/sp/icon
Copy the code

let base = 'https://www.example.com'

// A url without a protocol is considered a relative address, and the protocol is taken from the base address
console.log(new URL('//image.example.com'.'http://www.example.com').href)  
// => http://image.example.com

console.log(new URL('//image.example.com'.'https://www.example.com').href) 
// => https://image.example.com

// The url is the complete absolute address, so the base argument is ignored
console.log(new URL('https://image.example.com', base).href) 
// => https://image.example.com
Copy the code

A static method

• URL.createObjectURL(object)
  • You can turn objects like File, Blob, etc. into a unique Blob URL
• URL.revokeObjectURL(objectURL)
  • Use before undoURL.createObjectURL()URL object created

URLSearchParams

The URLSearchParams interface defines some useful methods for handling query strings for urls.

The URLSearchParams interface is used to convert query strings to and from objects

So that the operation of the query string becomes very convenient, do not need their own segmentation or regular processing

The URLSearchParams constructor can pass three types of arguments:

URL query string

// The query string that is passed in can either start with? You don't have to start with a question mark
let params = new URLSearchParams('? name=Klaus&age=23')
console.log(params.get('age')) / / = > 23
Copy the code

An array

// The parameters are arrays, and each key and value form a corresponding subarray
let params = new URLSearchParams([['name'.'Klaus'], ['age'.23]])
console.log(params.get('age')) / / = > 23
Copy the code

Objects form

let params = new URLSearchParams({ name: 'Klaus'.age: 23 })
console.log(params.get('age')) / / = > 23
Copy the code

append

Append () inserts a specified key/value pair as the new search parameter.

Even if the original key already exists, a new key with the same name will not be overwritten

let params = new URLSearchParams()

params.append('foo'.'bar')
params.append('foo'.'baz')

console.log(params.get('foo')) // => bar
console.log(params.getAll('foo')) // => ['bar', 'baz']
Copy the code

delete

Removes the specified search parameter and its value from the search parameter list

If a key corresponds to multiple values, all values are removed

let params = new URLSearchParams()

params.append('foo'.'bar')
params.append('foo'.'baz')

params.delete('foo')
console.log(params.get('foo')) // => null
Copy the code

get

Gets the first value of the specified search parameter

Multiple keys of the same name, take only the first one

If not found, null is returned

let params = new URLSearchParams()

console.log(params.get('foo')) // => null
Copy the code

getAll

Gets all the values of the specified search parameters

If there are multiple values, return an array

Returns an empty array with no value

let params = new URLSearchParams()

params.append('foo'.'bar')
params.append('foo'.'baz')

console.log(params.getAll('baz')) // => null
console.log(params.getAll('foo')) // => ['bar', 'baz']
Copy the code

has

Returns Boolean to determine whether a value for this search parameter exists

let params = new URLSearchParams()

params.append('foo'.'bar')
params.append('foo'.'baz')

console.log(params.has('baz')) // => false
console.log(params.has('foo')) // => true
Copy the code

set

Sets a new value for a search parameter, or removes all other values if there were more than one

let params = new URLSearchParams()

params.set('foo'.'bar')
params.set('foo'.'baz')

console.log(params.get('foo')) // => 'baz'
console.log(params.getAll('foo')) // => ['baz']
Copy the code

toString

Returns a string of search parameters that can be used directly on the URL

let params = new URLSearchParams()

params.set('name'.'Klaus')
params.set('age'.24)

// The output is no? the
console.log(params.toString()) // => name=Klaus&age=24
Copy the code

forEach

The normal forEach() method

let params = new URLSearchParams()

params.set('name'.'Klaus')
params.set('age'.24)

params.forEach((v, k) = > {
  console.log('key', k)
  console.log('value', v)
})
Copy the code

sort

Dictionary sort by key name

let params = new URLSearchParams()

params.set('name'.'Klaus')
params.set('age'.24)

params.sort()
console.log(params.toString()) // => age=24&name=Klaus
Copy the code

keys

Returns an iterator containing all the key names of key/value pairs

let params = new URLSearchParams()

params.set('name'.'Klaus')
params.set('age'.24)

for (let iter of params.keys()) {
  console.log(iter)
  /* => name age */
}
Copy the code

values

Returns an iterator containing all the values of key/value pairs

let params = new URLSearchParams()

params.set('name'.'Klaus')
params.set('age'.24)

for (let iter of params.values()) {
  // All data returned by iterators are strings
  // So age is converted to a string
  console.log(iter)
  /* => Klaus 24 */
}
Copy the code

entrires

Returns an iterator containing all key/value pairs

let params = new URLSearchParams()

params.set('name'.'Klaus')
params.set('age'.24)

for (let iter of params.entries()) {
  // All data returned by iterators are strings
  // So age is converted to a string
  console.log(iter)
  /* => ['name', 'Klaus'] ['age', '24'] */
}
Copy the code