url - encodeURIComponent 与 URLSearchParams 的不同输出

Question

我使用 URLSearchParmas 构建了一个带有查询参数的 oauth2 url API。但是，输出 URL 没有返回预期的 URL。谁能帮我理解这两个 API 之间的区别以及如何获得与 encodeURIComponent 的输出相同的结果？ , 使用 URLSearchParams ?谢谢!

const expected = encodeURIComponent('code id_token'); // code%20id_token

const search = new URLSearchParams();
search.set('response_type', 'code id_token');
search.toString(); // code+id_token

Answer 1

根据WHATWG , URLSearchParams使用 application/x-www-form-urlencoded格式。虽然它适用于解码 URL 查询，但对于编码它可能会导致意外结果，例如空格被编码为 +和额外的字符，例如 ~被百分比编码。最好使用encodeURIComponent反而:
有一个对象:

const params = {
  text1: 'aaa bbb',
  text2: '-._*~()'
}

代替:

url.search = (new URLSearchParams(params)).toString()

采用:

url.search = Object.entries(params)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join('&')

此外，根据 MDN甚至 encodeURIComponent不符合较新的 RFC 3986它定义了更多要转义的字符，例如 * .虽然如果您不将这些附加字符用作字段分隔符，可能不转义它们是安全的，但如果您想严格遵守最新的 RFC，请使用来自 MDN 的更新实现。 :

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

一个试验场:

const params = {
  text1: 'aaa bbb',
  text2: '-._*~()'
}

const url1 = new URL('http://example.com')
const search1 = new URLSearchParams(params)
url1.search = search1 // Incorrect
console.log('URLSearchParams', url1.toString())

function fixedEncodeURIComponent(str) {
    return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
        return '%' + c.charCodeAt(0).toString(16)
    })
}
const url2 = new URL('http://example.com')
const search2 = Object
  .entries(params)
  .map(([key, value]) => `${fixedEncodeURIComponent(key)}=${fixedEncodeURIComponent(value)}`)
  .join('&')
url2.search = search2 // Correct
console.log('fixedEncodeURIComponent', url2.toString())