你能发现这段代码中的错误吗？你可能不知不觉地以不安全的方式编写URL了。
const url = `https://builder.io/api/v2/content
?model=${model}&locale=${locale}?query.text=${text}`
const res = await fetch(url)
常见问题＃1：分隔符字符不正确
带有额外 ? 的URL字符串
哎呀！这显然是一个初学者的错误，但很容易被忽视，我在自己的代码中甚至在JS开发十年后也发现了这个错误。
在我看来，这种错误的常见原因是在编辑或移动代码之后。例如，你有一个结构正确的URL，然后从一个地方复制一部分到另一个地方，然后错过了参数分隔符被错误地排列的事实。
这也可能发生在连接时。例如：
url = url + '?foo=bar'
但等等，原始url可能已经有一个查询参数了。好的，这应该是：
url = url + '&foo=bar'
但是，等等，如果原始url没有查询参数，那么这样现在就是错的了。糟糕。
b常见问题＃2：忘记编码
带有未编码参数的URL字符串
噢。模型和locale可能不需要编码，因为它们是URL安全值，但我没有停下来考虑文本可能是各种文本，包括空格和特殊字符，这会给我们带来问题。
所以也许我们会过度纠正并且更加谨慎地处理事情：
const url = `https://builder.io/api/v2/content
?model=${
encodeURIComponent(model)
}&locale=${
encodeURIComponent(locale)
}&query.text=${
encodeURIComponent(text)
}`
常见问题＃3：意外的空白字符
带有意外空白字符的URL字符串
哎呀。为了将这个长URL分成多行，我们意外地包含了换行符和额外的空格进入URL，这将导致我们无法按预期工作。
现在我们可以正确地拆分字符串，但是我们变得更加混乱和难以阅读：
const url = `https://builder.io/api/v2/content`
+ `?model=${
encodeURIComponent(model)
}&locale=${
encodeURIComponent(locale)
}&query.text=${
encodeURIComponent(text)
}`
仅仅是为了正确地构造一个URL，我们就要做这么多。
URL构造函数来解救
解决上述挑战的更清晰和更安全的解决方案是使用URL构造函数：
const url = new URL('https://builder.io/api/v2/content')
url.searchParams.set('model', model)
url.searchParams.set('locale', locale)
url.searchParams.set('text', text)
const res = await fetch(url.toString())
这为我们解决了几个问题：
- 分隔符字符始终正确（第一个参数使用？，之后使用&）。
- 所有参数都会自动编码。
- 在将长URL跨多行拆分时，不会有额外的空白字符。
修改URL
在我们需要修改URL但不知道当前状态的情况下，它也非常有帮助。
例如，不是遇到这个问题：
url += (url.includes('?') ? '&' : '?') + 'foo=bar'
我们可以直接这样做：
// 假设 `url` 是一个URL
url.searchParams.set('foo', 'bar')
// 或者如果URL是一个字符串
const structuredUrl = new URL(url)
structuredUrl.searchParams.set('foo', 'bar')
url = structuredUrl.toString()
同样，你也可以修改URL的其他部分：
const url = new URL('https://builder.io')
url.pathname = '/blog' // 更新路径
url.hash = '#featured' // 更新哈希
url.host = 'www.builder.io' // 更新主机
url.toString() // https://www.builder.io/blog#featured
读取URL值
现在，“我只想从当前URL中读取查询参数而不使用库”这个古老的问题已经解决了。
const pageParam = new URL(location.href).searchParams.get('page')
或者例如使用以下方式更新当前URL：
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('node:http');
const server = http.createServer((req, res) => {
const url = new URL(req.url, `https://${req.headers.host}`)
// 读取路径，查询等...
});
以及Deno：
import { serve } from "https://deno.land/std/http/mod.ts";
async function reqHandler(req: Request) {
const url = new URL(req.url)
// 读取路径，查询等...
return new Response();
}
serve(reqHandler, { port: 8000 });
URL属性了解
URL实例支持浏览器中已经熟悉的所有属性，比如window.location或锚元素，你都可以读取和写入：
const url = new URL('https://builder.io/blog?page=1');
url.protocol // https:
url.host // builder.io
url.pathname // /blog
url.search // ?page=1
url.href // https://builder.io/blog?page=1
url.origin // https://builder.io
url.searchParams.get('page') // 1
一张URL的图表，并指出每个部分，比如“主机名”与“哈希”等。
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')
陷阱
一个大陷阱是，传递给URL构造函数的所有URL都必须是绝对URL。
例如，这将抛出错误：
new URL('/blog') // ERROR!
你可以通过提供origin作为第二个参数来解决这个问题，就像这样：
new URL('/blog', 'https://builder.io')
或者，如果你真的只需要处理URL的部分，你也可以直接使用URLSearchParams，如果你只需要处理相对URL的查询参数：
const params = new URLSearchParams('page=1')
params.set('page=2')
params.toString()
URLSearchParams还有一个好处，就是它还可以接受一个键值对对象作为其输入：
const params = new URLSearchParams({
page: 1,
text: 'foobar',
})
params.set('page=2')
params.toString()
浏览器和运行时支持
新的URL支持所有现代浏览器，以及Node.js和Deno！
