為何URL建構函數不會對查詢字串中的括號進行編碼?
P粉287254588
2023-09-03 21:05:00
<p>在JavaScript中,當括號和圓括號出現在查詢字串中時,<code>URL</code>建構子不會對它們進行編碼,而<code>encodeURI</code>或<code>encodeURIComponent</code>總是會對它們進行編碼。這讓我感到困惑,因為大多數來源都說在查詢參數中包含特殊字元時要使用<code>encodeURI</code>/<code>encodeURIComponent</code>進行編碼。我期望<code>URL</code>物件具有類似的行為。 </p>
<p>這導致我在編寫單元測試時遇到問題,因為我不知道URL物件的查詢參數將如何進行編碼。是否有規範來說明這一點,還是我應該在使用<code>URL</code>建構子之前始終對參數進行編碼?謝謝您的幫忙。 </p>
<hr />
<p>範例顯示URL物件在查詢字串中不對括號進行編碼</p>
<pre class="brush:js;toolbar:false;">const href = (new URL('https://foobar.com?myQuery={"@asdf/asdf":"1234"}' )).href;
// ^ https://foobar.com/?myQuery={"@asdf/asdf":"1234"}
</pre>
<p>如果我使用<code>encodeURI</code>,唯一的差異就是括號被編碼了</p>
<pre class="brush:js;toolbar:false;">const href = encodeURI('https://foobar.com?myQuery={"@asdf/asdf":"1234"}');
// ^ https://foobar.com?myQuery={"@asdf/asdf":"1234"}
</pre>
<hr />
<p>注意:如果括號不在查詢參數中,URL物件會對其進行編碼。 </p>
<pre class="brush:js;toolbar:false;">const href = (new URL('https://foobar.com/}}}?myQuery={"@asdf/asdf":" 1234"}')).href;
// ^ https://foobar.com/}}}?myQuery={"@asdf/asdf":"1234"}
</pre></p>
有多種可能的編碼方式,它們都應該被解釋為相同的URL,因此從技術上講都不是錯誤的。另一個例子是百分比編碼可以使用大寫或小寫字元(
或
(在某些部分)。
�
或�
),網域不區分大小寫,空格可以被編碼為如果您想對特定的URL編碼實現進行單元測試,可以進行字串匹配,但如果您想知道兩個URL是否相同,無論它們是如何編碼的,您首先需要進行一步稱為“規範化”的操作,然後再進行比較。