encodeURIComponent 与 URLSearchParams 的不同输出

Question

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

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 3986 定义了更多要转义的字符，例如* 。 虽然如果您不将这些附加字符用作字段分隔符，不转义它们可能是安全的，但如果您想严格遵守最新的 RFC，请使用MDN中的此更新实现：

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

一个试验场：

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).toUpperCase()
    })
}
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())