JavaScript 中更安全的 URL 讀寫

前言

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)
  }`

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