前言

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

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

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

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

常見問題

不正確的分隔符

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

忘記編碼

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

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

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

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

意外的空白字符

有時候我們?yōu)榱藢⒁粋€長 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ù)返回一個新創(chuàng)建的 URL對象，表示由一組參數(shù)定義的 URL。

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

語法

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

參數(shù)

url

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

base 可選

是一個表示基準(zhǔn) URL 的 DOMString，在 url 是相對 URL 時，它才會起效。如果未指定，則默認(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)

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

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

修改URL

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

比如：

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

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

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

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

讀取URL

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

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 實例支持您已經(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實例上 訪問，url.searchParams支持許多方便的方法：

searchParams.has(name)

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

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

searchParams.get(name)

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

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

searchParams.getAll(name)

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

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

searchParams.set(name, value)

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

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

searchParams.append(name, value)

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

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

searchParams.delete(name)

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

url.searchParams.delete('page')

兼容性

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

到此這篇關(guān)于JavaScript中更安全的URL讀寫方法總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript讀寫URL內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論