前言

URL對于我們開發(fā)人員來講，應(yīng)該是非常熟悉了。在對URL進(jìn)行參數(shù)拼接時(shí)，我們一般都會直接進(jìn)行字符串拼接或使用模版字符串，因?yàn)檫@樣非常方便，但是我們這樣其實(shí)會在不知不覺中以不安全的方式編寫 URL。

比如，我們通常會這樣寫：

const url = `https://www.baidu.com
  ?model=${model}&locale=${locale}?query.text=${text}`

這樣確實(shí)寫起來非常方便，但你可能會在不知不覺中會你的程序帶來一些問題。(如上代碼就是一段有問題的代碼)

如果這篇文章有幫助到你，??關(guān)注+點(diǎn)贊??鼓勵(lì)一下作者，文章公眾號首發(fā)，關(guān)注 前端南玖 第一時(shí)間獲取最新文章～

常見問題

不正確的分隔符

這種錯(cuò)誤可能在新手身上比較常見，但即使是經(jīng)驗(yàn)老道的程序員也不可能絕對避免這個(gè)錯(cuò)誤。造成這個(gè)錯(cuò)誤的罪魁禍?zhǔn)捉^大多數(shù)是在修改或移動(dòng)代碼之后。例如，你有一個(gè)結(jié)構(gòu)正確的 URL，然后將一個(gè)片段從一個(gè)片段復(fù)制到另一個(gè)片段，然后錯(cuò)過了參數(shù)分隔符的錯(cuò)誤排序。

忘記編碼

許多時(shí)候我們URL上的參數(shù)是需要進(jìn)行編碼的，因?yàn)閁RL參數(shù)可以是任意類型的文本，包括空格和特殊字符，這會給我們帶來一些無法預(yù)料的問題。

所以為了避免這種情況，我們往往會這樣寫：

const url = `https://www.baidu.com
  ?model=${
    encodeURIComponent(model)
  }&locale=${
    encodeURIComponent(locale)
  }&query.text=${
    encodeURIComponent(text)
  }`

但這樣的寫法給人的感覺是非常的冗余且不雅觀??

意外的空白字符

有時(shí)候我們?yōu)榱藢⒁粋€(gè)長 URL 分成多行，我們會不小心在 URL

中包含了換行符和額外的空格，這將導(dǎo)致無法按預(yù)期進(jìn)行抓取。

所以為了正確分解URL字符串，我們通常會這樣寫：

const url = `https://www.baidu.com`
  + `?model=${
    encodeURIComponent(model)
  }&locale=${
    encodeURIComponent(locale)
  }&query.text=${
    encodeURIComponent(text)
  }`

但這樣是我們的代碼變得更加混亂以及難以閱讀。

難道就沒有一種既安全又優(yōu)雅的方法來編寫URL嗎???

URL構(gòu)造函數(shù)

既優(yōu)雅又安全的方法就是使用URL構(gòu)造函數(shù)。

「URL()」 構(gòu)造函數(shù)返回一個(gè)新創(chuàng)建的 URL對象，表示由一組參數(shù)定義的 URL。

如果給定的基本 URL 或生成的 URL 不是有效的 URL 鏈接，則會拋出一個(gè)TypeError。

語法

const url = new URL(url [, base])

「參數(shù)」

• url

是一個(gè)表示絕對或相對 URL 的 DOMString。如果url 是相對 URL，則會將 base 用作基準(zhǔn) URL。如果 url 是絕對 URL，則無論參數(shù)base是否存在，都將被忽略

• base 可選

是一個(gè)表示基準(zhǔn) URL 的 DOMString，在 url 是相對 URL 時(shí)，它才會起效。如果未指定，則默認(rèn)為 ''

解決

所以上面的URL我們就可以這樣來寫：

const url = new URL('https://www.baidu.com')

url.searchParams.set('model', model)
url.searchParams.set('locale', locale)
url.searchParams.set('text', text)

這樣寫就可以為我們解決這些問題：

• 分隔符總是正確的(?對于第一個(gè)參數(shù)，以及之后的參數(shù))
• 所有參數(shù)都自動(dòng)編碼
• 長 URL 跨多行時(shí)沒有額外空白字符的風(fēng)險(xiǎn)

修改URL

對于我們在不知道當(dāng)前參數(shù)狀態(tài)下的情況，它也非常適用。

比如：

url += (url.includes('?') ? '&' : '?') + 'foo=bar'

使用URL構(gòu)造函數(shù)我們可以這樣寫：

// url是一個(gè)URL構(gòu)造函數(shù)
url.searchParams.set('foo', 'bar')

// 或者是一個(gè)字符串
const structuredUrl = new URL(url)
structuredUrl.searchParams.set('foo', 'bar')
url = structuredUrl.toString()

讀取URL

現(xiàn)在，我如果想在沒有庫的情況下從當(dāng)前 URL 讀取查詢參數(shù)這個(gè)由來已久的問題也得到了解決。

const pageParam = new URL(location.href).searchParams.get('page')

const url = new URL(location.href)
const currentPage = Number(url.searchParams.get('page'))
url.searchParams.set('page', String(currentPage + 1))
location.href = url.toString()

這不僅限于瀏覽器，它也可以在 Node.js 中使用

const http = require('http');

const server = http.createServer((req, res) => {
  const url = new URL(req.url, `https://${req.headers.host}`)
});

URL屬性

URL 實(shí)例支持您已經(jīng)在瀏覽器中使用的所有屬性，例如 onwindow.location或 anchor 元素，所有這些我們都可以讀寫：

const url = new URL('https://www.baidu.com/a?page=1');

url.protocol // https:
url.host     // www.baidu.com
url.pathname // /a
url.search   // ?page=1
url.href     // https://www.baidu.com/a?page=1
url.origin   // https://www.baidu.com
url.searchParams.get('page') // 1

常用URLSearchParams方法

該URLSearchParams對象可在URL實(shí)例上訪問，url.searchParams支持許多方便的方法：

searchParams.has(name)

檢查搜索參數(shù)是否包含給定名稱

url.searchParams.has('page') // true

searchParams.get(name)

獲取給定參數(shù)的值

url.searchParams.get('page') // '1'

searchParams.getAll(name)

獲取為參數(shù)提供的所有值。如果你允許同名的多個(gè)值，這很方便，例如&page=1&page=2

url.searchParams.getAll('page') // ['1']

searchParams.set(name, value)

設(shè)置參數(shù)的值

url.searchParams.set('page', '1')

searchParams.append(name, value)

附加一個(gè)參數(shù)——如果你可能多次支持同一個(gè)參數(shù)，這很有用，比如&page=1&page=2

url.searchParams.append('page', '2')

searchParams.delete(name)

從 URL 中完全刪除一個(gè)參數(shù)

url.searchParams.delete('page')

兼容性

new URL基本支持所有現(xiàn)代瀏覽器(除了IE)，以及 Node.js。