前言

URL對于我們開發人員來講，應該是非常熟悉了。在對URL進行參數拼接時，我們一般都會直接進行字符串拼接或使用模版字符串，因為這樣非常方便，但是我們這樣其實會在不知不覺中以不安全的方式編寫 URL。

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

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

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

如果這篇文章有幫助到你，??關注+點贊??鼓勵一下作者，文章公眾號首發，關注 前端南玖 第一時間獲取最新文章～

常見問題

不正確的分隔符

這種錯誤可能在新手身上比較常見，但即使是經驗老道的程序員也不可能絕對避免這個錯誤。造成這個錯誤的罪魁禍首絕大多數是在修改或移動代碼之后。例如，你有一個結構正確的 URL，然后將一個片段從一個片段復制到另一個片段，然后錯過了參數分隔符的錯誤排序。

忘記編碼

許多時候我們URL上的參數是需要進行編碼的，因為URL參數可以是任意類型的文本，包括空格和特殊字符，這會給我們帶來一些無法預料的問題。

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

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

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

意外的空白字符

有時候我們為了將一個長 URL 分成多行，我們會不小心在 URL

中包含了換行符和額外的空格，這將導致無法按預期進行抓取。

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

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

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

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

URL構造函數

既優雅又安全的方法就是使用URL構造函數。

「URL()」 構造函數返回一個新創建的 URL對象，表示由一組參數定義的 URL。

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

語法

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

「參數」

• url

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

• base 可選

是一個表示基準 URL 的 DOMString，在 url 是相對 URL 時，它才會起效。如果未指定，則默認為 ''

解決

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

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

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

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

• 分隔符總是正確的(?對于第一個參數，以及之后的參數)
• 所有參數都自動編碼
• 長 URL 跨多行時沒有額外空白字符的風險

修改URL

對于我們在不知道當前參數狀態下的情況，它也非常適用。

比如：

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

使用URL構造函數我們可以這樣寫：

// url是一個URL構造函數
url.searchParams.set('foo', 'bar')

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

讀取URL

現在，我如果想在沒有庫的情況下從當前 URL 讀取查詢參數這個由來已久的問題也得到了解決。

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 實例支持您已經在瀏覽器中使用的所有屬性，例如 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實例上訪問，url.searchParams支持許多方便的方法：

searchParams.has(name)

檢查搜索參數是否包含給定名稱

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

searchParams.get(name)

獲取給定參數的值

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

searchParams.getAll(name)

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

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

searchParams.set(name, value)

設置參數的值

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

searchParams.append(name, value)

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

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

searchParams.delete(name)

從 URL 中完全刪除一個參數

url.searchParams.delete('page')

兼容性

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