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

但这样的写法给人的感觉是非常的冗余且不雅观