Why doesn't the URL constructor encode parentheses in the query string?

Question

In JavaScript, the URL constructor does not encode brackets and parentheses when they appear in a query string, while encodeURI or encodeURIComponent will always encode them. This confuses me because most sources say to use encodeURI/encodeURIComponent to encode when special characters are included in query parameters. I expected similar behavior for the URL object.

This causes me to have problems writing unit tests because I don't know how the URL object's query parameters will be encoded. Is there a specification that states this, or should I always encode parameters before using the URL constructor? thank you for your help.

---

Example showing URL object not encoding brackets in query string

const href = (new URL('https://foobar.com?myQuery={"@asdf/asdf":"1234"}' )).href;
// ^ https://foobar.com/?myQuery={"@asdf/asdf":"1234"}

If I use encodeURI, the only difference is that the brackets are encoded

const href = encodeURI('https://foobar.com?myQuery={"@asdf/asdf":"1234"}');
// ^ https://foobar.com?myQuery={"@asdf/asdf":"1234"}

---

Note: If the parentheses are not in the query parameters, the URL object will encode them.

const href = (new URL('https://foobar.com/}}}?myQuery={"@asdf/asdf":" 1234"}')).href;
// ^ https://foobar.com/}}}?myQuery={"@asdf/asdf":"1234"}

Answer 1

There are multiple possible encodings, they should all be interpreted as the same URL, so none are technically wrong. Another example is that percent encoding can use uppercase or lowercase characters (� or �), domain names are not case-sensitive, and spaces can be encoded as or (in some parts).

If you want to unit test a specific implementation of URL encoding, you can do string matching, but if you want to know if two URLs are the same regardless of how they are encoded, you first need to do a step called "canonicalization" operation and then compare.