URL缂栫爜屽叏鎸囧崡锛氫粠鍏ラ棬鍒扮簿閫氱殑鍏ㄩ潰瑙ｆ | 胖袋鼠锟?/title> <meta name="description" content="璇︾粏浠粛URL缂栫爜的鏈蹇点�佺紪佽鍒欍�佸父瑙佸簲ㄥ満鏅�佸伐鍏蜂娇ㄦ妧宸э紝浠ュ強encodeURI鍜宔ncodeURIComponent的勫鍒紝甯姪�鍙戣�叏闈㈡帉鎻RL缂栫爜鎶�鏈拷?> <meta name="keywords" content="URL缂栫,URL瑙ｇ,URLEncode,URLDecode,Web�锟?API�锟?鐗畩瀛缂栫,鐧惧垎鍙风紪锟�?URI缂栫"> <link rel="canonical" href="https://zhihuinews.com/articles/url-encoding-complete-guide.html">  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "URL缂栫爜屽叏鎸囧崡锛氫粠鍏ラ棬鍒扮簿閫氱殑鍏ㄩ潰瑙ｆ", "description": "璇︾粏浠粛URL缂栫爜的鏈蹇点�佺紪佽鍒欍�佸父瑙佸簲ㄥ満鏅�佸伐鍏蜂娇ㄦ妧宸э紝浠ュ強encodeURI鍜宔ncodeURIComponent的勫鍒紝甯姪�鍙戣�叏闈㈡帉鎻RL缂栫爜鎶�鏈拷?, "datePublished": "2026-04-26", "dateModified": "2026-04-26", "url": "https://zhihuinews.com/articles/url-encoding-complete-guide.html", "author": { "@type": "Organization", "name": "胖袋鼠锟? }, "publisher": { "@type": "Organization", "name": "胖袋鼠锟? } } </script>  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "棣栭", "item": "https://zhihuinews.com/index.html" }, { "@type": "ListItem", "position": 2, "name": "鏂囨", "item": "https://zhihuinews.com/articles/index.html" }, { "@type": "ListItem", "position": 3, "name": "URL缂栫爜屽叏鎸囧崡锛氫粠鍏ラ棬鍒扮簿閫氱殑鍏ㄩ潰瑙ｆ", "item": "https://zhihuinews.com/articles/url-encoding-complete-guide.html" } ] } </script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-color: #ffffff; --text-color: #1f2937; --link-color: #2563eb; --border-color: #e5e7eb; --code-bg: #f6f8fa; --quote-bg: #fafbfc; --quote-border: #e2e8f0; --card-bg: #f9fafb; } @media (prefers-color-scheme: dark) { :root { --bg-color: #111827; --text-color: #f3f4f6; --link-color: #60a5fa; --border-color: #374151; --code-bg: #1e1e1e; --quote-bg: #2d2d2d; --quote-border: #4b5563; --card-bg: #1f2937; } } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.4; min-height: 100vh; } .container { max-width: 1000px; margin: 0 auto; padding: 0 20px; } @media (max-width: 768px) { .container { padding: 0 15px; } } .back-link { display: inline-block; margin: 20px 0; color: var(--link-color); text-decoration: none; font-size: 14px; } .back-link:hover { text-decoration: underline; } .article { background-color: var(--bg-color); border-radius: 8px; padding: 40px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } @media (max-width: 768px) { .article { padding: 24px; } } h1 { font-size: 32px; line-height: 1.3; font-weight: 600; margin-bottom: 16px; } @media (max-width: 768px) { h1 { font-size: 28px; } } h2 { font-size: 24px; line-height: 1.3; font-weight: 600; margin-top: 48px; margin-bottom: 12px; } @media (max-width: 768px) { h2 { font-size: 22px; } } h3 { font-size: 20px; line-height: 1.4; font-weight: 600; margin-top: 32px; margin-bottom: 8px; } @media (max-width: 768px) { h3 { font-size: 18px; } } h4 { font-size: 18px; line-height: 1.4; font-weight: 500; margin-top: 24px; margin-bottom: 8px; } @media (max-width: 768px) { h4 { font-size: 16px; } } p { margin-bottom: 14px; font-size: 16px; } @media (max-width: 768px) { p { font-size: 15px; } } a { color: var(--link-color); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { padding-left: 24px; margin-bottom: 20px; } li { margin-bottom: 8px; font-size: 16px; } @media (max-width: 768px) { li { font-size: 15px; } } .code-block { background-color: var(--code-bg); font-family: 'Courier New', Consolas, monospace; font-size: 14px; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 16px 0; } blockquote { border-left: 4px solid var(--quote-border); background-color: var(--quote-bg); padding: 12px 16px; font-style: italic; font-size: 15px; margin: 16px 0; } img { display: block; max-width: 100%; margin: 20px auto; border-radius: 8px; } figcaption { text-align: center; font-size: 14px; color: #6c757d; margin-top: 8px; margin-bottom: 20px; } .metadata { display: flex; gap: 16px; font-size: 14px; color: #6c757d; margin-bottom: 32px; flex-wrap: wrap; } .metadata span { display: flex; align-items: center; gap: 4px; } .related-tools { margin-top: 64px; margin-bottom: 48px; } .related-tools h3 { font-size: 20px; font-weight: 600; margin-bottom: 24px; } .tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } @media (max-width: 768px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } } .tool-card { background-color: var(--card-bg); border-radius: 8px; padding: 12px; border: 1px solid var(--border-color); } .tool-card h4 { margin-top: 0; margin-bottom: 4px; font-size: 16px; line-height: 1.2; } .tool-card p { margin-bottom: 8px; font-size: 14px; line-height: 1.3; color: #6c757d; } .tool-card a { font-size: 14px; } .more-tools { margin-top: 16px; font-size: 14px; } .related-docs { margin-top: 48px; margin-bottom: 48px; } .related-docs h3 { font-size: 20px; font-weight: 600; margin-bottom: 24px; } .doc-list { list-style: none; padding: 0; } .doc-list li { margin-bottom: 16px; background-color: var(--card-bg); border-radius: 8px; padding: 12px; border: 1px solid var(--border-color); } .doc-list h4 { margin-top: 0; margin-bottom: 4px; font-size: 16px; } .doc-list p { margin-bottom: 0; font-size: 14px; color: #6c757d; } .all-docs { margin-top: 24px; font-size: 14px; background-color: var(--card-bg); border-radius: 8px; padding: 12px; border: 1px solid var(--border-color); display: flex; align-items: center; min-height: 60px; } .footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--border-color); } </style> <script src="../assets/baidu-analytics.js"></script> </head> <body> <div class="container"> <div class="header-bar"> <a href="../index.html" class="back-link">← 返回首页</a> <a href="../index.html" class="tool-brand-link"><span class="brand-icon"></span>胖鼠<span class="brand-domain" style="font-weight:700;font-size:0.9rem;color:#333;opacity:0.8;margin-left:0.12rem;letter-spacing:0.8px;font-family:'Helvetica Neue','Arial Narrow',Arial,sans-serif;font-stretch:condensed;">pangdaishu.com</span></a> </div><div class="article"> <h1>URL缂栫爜屽叏鎸囧崡锛氫粠鍏ラ棬鍒扮簿閫氱殑鍏ㄩ潰瑙ｆ</h1> <div class="metadata"> <span>胖袋鼠锟?/span> <span>2026-04-26</span> </div> <p>鍦╓eb�鍙戜腑锛RL缂栫爜鏄椤瑰熀�浣嗚嚦鍏抽噸瑕佺殑鎶�鏈�傚綋浣犻渶瑕佸湪URL涓紶閫掍腑鏂囧瓧绗︺�佺娈婄鍙凤紝鎴�呭鐞嗙敤鎴疯鍏ユ椂锛孶RL缂栫爜灏卞彉寰椾笉鍙垨缂恒�傜劧鑰岋紝寰堝�鍙戣�URL缂栫爜的悊瑙ｄ粎鍋滅鍦ㄨ〃闈紝甯稿父囧埌涔辩爜锟?04閿欒鎴�呭畨鍏ㄩ棶棰樻椂涓嶇煡鎵�鎺?/p> <p>鏈枃灏嗗甫浣犳繁鍏ヤ簡瑙RL缂栫爜的伐浣滃師鐞嗐�佺佽鍒欍�佸父瑙佸簲ㄥ満鏅紝浠ュ強濡備綍ｇ‘浣跨敤URL缂栬В佸伐鍏枫�傞�氳繃鏈枃的勫涔狅紝浣犲皢鑳藉娓垉鏈綑鍦板鐞嗗悇绉峌RL缂栫爜闂锟?/p> <h2>涓�銆乁RL缂栫爜的鏈锟?/h2> <h3>1. 浠�涔堟槸URL缂栫爜锟?/h3> <p>URL缂栫爜锛圲RL Encoding锛紝涔熺О涓虹櫨鍒嗗彿缂栫爜锛ercent-Encoding锛紝鏄URL涓殑鐗规畩瀛杞崲涓哄彲鍦ㄤ簰鑱旂綉涓婂畨鍏ㄤ紶杈撶殑鏍煎紡的勬鍒躲�傜敱浜嶶RL标准瑙勫畾鍙兘浣跨敤涓�閮ㄥ垎ASCII瀛锛屽洜ら渶瑕佸皢闈濧SCII瀛鍜岀壒娈婂瓧绗﹁浆鎹负甯︾鍒嗗彿锟�?锛缂�的崄鍏繘鍒舵牸忥拷?/p> <p>URL缂栫爜的牳蹇冩�濇兂鏄</p> <ul> <li>灏嗘瘡涓瓧绗﹁浆鎹负鍏跺搴旂殑UTF-8瀛妭搴忓</li> <li>灏嗘瘡涓瓧鑺傝〃绀轰负%XX的勫舰忥紝鍏朵腑XX鏄妭的勫崄鍏繘鍒拷?/li> <li>淇濈鏌愪簺涓嶇侊紙瀛瘝銆佹暟拷?_.~锟�?/li> </ul> <h3>2. URL缂栫爜的巻锟?/h3> <p>URL缂栫爜鏈�鍒濇槸鍦≧FC 1738涓畾涔夌殑锛屽悗鏉ュ湪RFC 3986涓繘琛屼簡鏇存柊銆傛渶鍒濆彧鏀寔ASCII瀛锛屼絾闅忕潃浜掕仈缃戠殑鍏ㄧ悆鍖栵紝闇�瑕佹鎸佹洿澶氱殑瀛闆嗭紝鍥犳UTF-8缂栫爜鎴负浜嗘爣鍑嗭?/p> <h3>3. URL缂栫爜的瑕侊?/h3> <p>URL缂栫爜涔墍浠ュ繀瑕侊紝涓昏鏈互涓嚑涓師鍥狅</p> <ul> <li><strong>淇濈瀛鍐茬獊锟?/strong>URL涓湁浜涘瓧绗︽湁鐗规畩鍚箟锛堝?锟�?锟�?绛級锛岀佸彲浠ラ伩鍏嶈繖浜涘瓧绗﹁璇В</li> <li><strong>闈濧SCII瀛寔锟�?/strong>URL闇�瑕佹鎸佷腑鏂囥�佹棩鏂囩瓑闈SCII瀛</li> <li><strong>鏁版嵁浼犺緭瀹叏锟�?/strong>鏌愪簺鐗规畩瀛鍙兘艰嚧叏闂鎴栦紶杈撻敊锟?/li> <li><strong>鏍煎紡屾暣鎬э</strong>繚URL鍦ㄥ悇绉嶆祻瑙堝櫒鍜屾湇鍔櫒涔棿ｇ‘瑙ｆ</li> </ul> <h2>浜屻�乁RL缂栫爜瑙璇﹁В</h2> <h3>1. 淇濈瀛涓庝笉缂爜</h3> <p>鏍嵁RFC 3986锛屼互涓瓧绗湪URL涓湁鐗规畩鍚箟锛岃绉负"淇濈瀛"锟�?/p> <div class="code-block"> ! # $ & ' ( ) * + , / : ; = ? @ [ ] </div> <p>浠ヤ笅琚О锟�?闈炰繚鐣欏瓧锟�?锛屽湪URL涓彲浠ョ洿鎺ヤ娇鐢紝涓嶉渶瑕佺紪侊細</p> <div class="code-block"> A-Z a-z 0-9 - _ . ~ </div> <h3>2. 缂栫爜杩囩▼</h3> <p>URL缂栫爜的叿浣撴楠わ</p> <ol> <li><strong>瀛杞崲锟?/strong>灏嗗緟缂爜杞崲涓哄叾UTF-8瀛妭搴忓</li> <li><strong>瀛妭缂栫爜锟?/strong>灏嗘瘡涓瓧鑺傝浆鎹%XX的勫舰锟?/li> <li><strong>绌烘牸澶悊锟?/strong>绌烘牸鍙互缂栫爜锟?20锟�?鍙凤紙浼犵粺鏂瑰紡锟?/li> </ol> <h4>缂栫爜绀轰緥锛氱佷腑鏂囧瓧锟?"浣犲"</h4> <p>姝ラ1锛氳幏鍙栧瓧绗︾殑Unicode佺偣</p> <div class="code-block"> 锟�? U+4F60 (鍗佽繘锟? 20154) 锟�? U+597D (鍗佽繘锟? 22909) </div> <p>姝ラ2锛氳浆鎹负UTF-8瀛妭搴忓</p> <div class="code-block"> 锟�? E4 BD A0 (3涓瓧锟? 锟�? E5 A5 BD (3涓瓧锟? </div> <p>姝ラ3锛氳浆鎹负鐧惧垎鍙紪锟�?/p> <div class="code-block"> %E4%BD%A0%E5%A5%BD </div> <h3>3. 歌瀛的勭侊拷?/h3> <p>浠ヤ笅鏄浜涘父瑙佸瓧绗︾殑URL缂栫爜鍊硷細</p> <div class="code-block"> 绌烘: %20 锟�?+ !: %21 #: %23 $: %24 &: %26 +: %2B , : %2C /: %2F : : %3A ;: %3B =: %3D ?: %3F @: %40 [: %5B ]: %5D </div> <h2>涓�乪ncodeURI涓巈ncodeURIComponent的勫锟�?/h2> <h3>1. encodeURI</h3> <p>encodeURI()ㄤ簬缂栫爜屾暣的刄RL锛屽畠浼繚鐣橴RL涓殑鐗规畩缁撴瀛锟�?/p> <ul> <li>涓嶇侊細瀛瘝銆佹暟拷? _ . ~ ! ( ) * ' , ; : @ & = + $ , # ? /</li> <li>缂栫爜锛墍鏈夐潪ASCII瀛锛屼互鍙婂湪URL涓病鏈夌娈婂惈涔殑瀛</li> </ul> <div class="code-block"> // JavaScript轰緥 const url = 'https://example.com/鎼滅?q=浣犲ソ涓'; const encoded = encodeURI(url); console.log(encoded); // 杈撳: https://example.com/%E6%90%9C%E7%B4%A2?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C // 娉ㄦ剰锛枩鏉�佸啋鍙风瓑淇濈瀛鏈缂 </div> <h3>2. encodeURIComponent</h3> <p>encodeURIComponent()ㄤ簬缂栫爜URL的勭粍鎴愰儴鍒嗭紝冧細缂爜鎵�鏈夌娈婂瓧绗︼</p> <ul> <li>涓嶇侊細瀛瘝銆佹暟拷? _ . ~</li> <li>缂栫爜锛墍鏈夊叾浠栧瓧绗︼紝鍖呮淇濈瀛</li> </ul> <div class="code-block"> // JavaScript轰緥 const query = '浣犲ソ涓&q=1'; const encoded = encodeURIComponent(query); console.log(encoded); // 杈撳: %E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C%26q%3D1 // 娉ㄦ剰锟?锟�?借缂栫爜锟? </div> <h3>3. 濡備綍閫夋</h3> <p>夋encodeURI杩樻槸encodeURIComponent鍙栧喅浜庝綘的勪娇鐢ㄥ満鏅</p> <ul> <li><strong>浣跨encodeURI锟�?/strong>缂栫爜屾暣的刄RL锛屼絾闇�瑕佷繚鐣橴RL的勭粨锟?/li> <li><strong>浣跨encodeURIComponent锟�?/strong>缂栫爜URL涓殑鏌鍙傛暟銆佽矾勬绛夌粍鎴愰儴锟?/li> </ul> <div class="code-block"> // 姝ｇ‘的娇鐢ㄦ柟锟�? const baseUrl = 'https://example.com/search'; const searchTerm = '浣犲ソ涓'; const page = 1; // 浣跨encodeURI缂栫爜屾URL const fullUrl = encodeURI(`${baseUrl}?q=${searchTerm}&page=${page}`); // 杈撳: https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C&page=1 // 浣跨encodeURIComponent缂栫爜鏌鍙傛暟 const encodedTerm = encodeURIComponent(searchTerm); const queryString = `q=${encodedTerm}&page=${page}`; // 杈撳: q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C&page=1 </div> <h2>鍥涖�乁RL缂栫爜的簲鐢ㄥ満锟�?/h2> <h3>1. 鏌ヨ涓插锟?/h3> <p>鍦║RL鏌ヨ涓蹭腑浼犻�掑弬鏁版椂锛岄渶瑕佸鍙傛暟鍊艰繘琛岀侊細</p> <div class="code-block"> // 鍦烘櫙锛悳绱㈠锟? const searchQuery = 'Python缂栫▼鏁欑▼'; const url = `https://example.com/search?q=${encodeURIComponent(searchQuery)}`; // 杈撳: https://example.com/search?q=Python%E7%BC%96%E7%A8%8B%E6%95%99%E7%A8%8B </div> <h3>2. URL璺緞缂</h3> <p>鍦║RL璺緞涓寘鍚腑鏂囧瓧绗︽垨鐗规畩瀛鏃堕渶瑕佺紪侊細</p> <div class="code-block"> // 鍦烘櫙锛枃浠朵笅锟�? const filename = '骞村害鎶ュ憡-2026.pdf'; const url = `https://example.com/downloads/${encodeURIComponent(filename)}`; // 杈撳: https://example.com/downloads/%E5%B9%B4%E5%BA%A6%E6%8A%A5%E5%91%8A-2026.pdf </div> <h3>3. 琛ㄥ崟鎻</h3> <p>HTML琛ㄥ崟鎻氦鏃讹紝娴忚鍣ㄤ細鑷姩暟鎹繘琛孶RL缂栫爜锟?/p> <div class="code-block"> <form action="/submit" method="GET"> <input type="text" name="username" value="犱笁"> <input type="text" name="comment" value="杩欐槸涓�娈佃瘎锟�?> <button type="submit">鎻愪</button> </form>   </div> <h3>4. 鍝堝笇Fragment澶勭</h3> <p>URL涓殑鍝堝笇Fragment锟�?鍚庨潰的儴鍒級涔熼渶瑕佹纭紪侊細</p> <div class="code-block"> // 鍦烘櫙锛氶闈㈠唴瀵艰 const section = '歌闂'; const url = `https://example.com/help#${encodeURIComponent(section)}`; // 杈撳: https://example.com/help#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98 </div> <h2>浜斻�乁RL缂栫爜的伐鍏蜂娇锟�?/h2> <h3>1. 在线URL缂栬В佸伐锟�?/h3> <p>浣跨敤在线URL缂栬В佸伐鍏峰彲浠ュ揩熻繘琛岀佸拰瑙ｇ爜鎿嶄綔锟�?/p> <p style="font-size: 18px;"><strong>🦘憠绔嵆浣跨敤锟�?/strong><a href="../tools/url-encode.html" style="font-weight: bold;">URL 缂栬В锟�?/a></p> <h3>2. 缂栫▼璇█涓殑URL缂栫</h3> <h4>JavaScript</h4> <div class="code-block"> // 缂栫 const text = '浣犲ソ涓'; const encoded = encodeURIComponent(text); console.log(encoded); // "%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C" // 瑙ｇ const decoded = decodeURIComponent(encoded); console.log(decoded); // "浣犲ソ涓" // 瀹屾URL缂栫 const url = 'https://example.com/search?q=' + encodeURIComponent('娴'); console.log(url); // "https://example.com/search?q=%E6%B5%8B%E8%AF%95" </div> <h4>Python</h4> <div class="code-block"> from urllib.parse import urlencode, quote, quote_plus, unquote, unquote_plus # 鍩烘湰缂 text = '浣犲ソ涓' encoded = quote(text) print(encoded) # "%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C" # 浣跨quote_plus锛堢┖鏍肩紪佷负+锟�? encoded_plus = quote_plus(text) print(encoded_plus) # "%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C" # URL鍙傛暟缂 params = {'q': '娴', 'page': 1} encoded_params = urlencode(params) print(encoded_params) # "q=%E6%B5%8B%E8%AF%95&page=1" # 瑙ｇ decoded = unquote(encoded) print(decoded) # "浣犲ソ涓" </div> <h4>Java</h4> <div class="code-block"> import java.net.URLEncoder; import java.net.URLDecoder; import java.nio.charset.StandardCharsets; public class URLEncodingExample { public static void main(String[] args) throws Exception { String text = "浣犲ソ涓"; // 缂栫 String encoded = URLEncoder.encode(text, StandardCharsets.UTF_8.toString()); System.out.println(encoded); // "%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C" // 瑙ｇ String decoded = URLDecoder.decode(encoded, StandardCharsets.UTF_8.toString()); System.out.println(decoded); // "浣犲ソ涓" } } </div> <h4>PHP</h4> <div class="code-block"> <?php $text = '浣犲ソ涓'; // 缂栫 $encoded = rawurlencode($text); echo $encoded . "\n"; // "%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C" // 鍙︿竴绉嶇紪佹柟忥紙绌烘牸缂爜锟?锟�? $encoded2 = urlencode($text); echo $encoded2 . "\n"; // "%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C" // 瑙ｇ $decoded = rawurldecode($encoded); echo $decoded . "\n"; // "浣犲ソ涓" ?> </div> <h2>鍏�乁RL缂栫爜的父瑙棶棰樹笌瑙ｅ喅鏂规</h2> <h3>1. 涓枃涔辩爜闂</h3> <p>涓枃涔辩爜父鏄敱浜庣佸瓧绗﹂泦涓嶄鑷村鑷殑锟�?/p> <ul> <li><strong>闂锟?/strong>鍚庣鎺ユ敹鍒殑鏄贡佹垨闂</li> <li><strong>鍘熷洜锟?/strong>鍓嶇浣跨UTF-8缂栫爜锛屽悗绔娇鐢℅BK瑙ｇ</li> <li><strong>瑙ｅ喅锟?/strong>繚鍓嶅悗绔娇ㄧ浉鍚岀殑闆嗭紙鎺ㄨ崘UTF-8锟�?/li> </ul> <h3>2. 鍙岄噸缂爜闂</h3> <p>鍙岄噸缂爜浼鑷碪RL涓%琚娆＄侊細</p> <div class="code-block"> // 閿欒绀轰緥锛氬弻閲嶇紪锟�? const term = '娴'; const encoded1 = encodeURIComponent(term); // "%E6%B5%8B%E8%AF%95" const encoded2 = encodeURIComponent(encoded1); // "%25E6%25B5%258B%25E8%25AF%2595" // 姝ｇ‘绀轰緥锛氬彧缂爜涓�锟? const correct = encodeURIComponent(term); // "%E6%B5%8B%E8%AF%95" </div> <h3>3. 绌烘牸缂爜闂</h3> <p>绌烘牸鍙互缂栫爜锟?20锟�?锛屼笉鍚屽満鏅湁涓嶅悓夋锟?/p> <ul> <li><strong>URL璺緞锟?/strong>绌烘牸蹇呴缂爜锟?20锛屼笉鑳界敤+</li> <li><strong>鏌ヨ鍙傛暟锟�?/strong>浼犵粺涓婄敤+锛岀幇浠ｆ爣鍑嗘帹锟?20</li> <li><strong>琛ㄥ崟鎻氦锟?/strong>application/x-www-form-urlencoded鏍煎紡锟?琛ㄧず绌烘牸</li> </ul> <h3>4. 淇濈瀛琚敊璇紪锟�?/h3> <p>浣跨encodeURIComponent缂栫爜屾URL浼氬鑷翠繚鐣欏瓧绗﹁閿欒缂爜锟?/p> <div class="code-block"> // 閿欒绀轰緥 const url = 'https://example.com/search?q=娴'; const wrong = encodeURIComponent(url); // 缁撴灉锛歨ttps%3A%2F%2Fexample.com%2Fsearch%3Fq%3D%E6%B5%8B%E8%AF%95 // URL缁撴琚鍧忎簡锟? // 姝ｇ‘绀轰緥 const correct = encodeURI(url); // 缁撴灉锛歨ttps://example.com/search?q=%E6%B5%8B%E8%AF%95 // URL缁撴淇濇寔屾 </div> <h3>5. Unicode瀛闂</h3> <p>鏌愪簺鑰佹棫的勭郴缁熷彲鑳戒笉鏀寔Unicode瀛锟�?/p> <ul> <li><strong>闂锟?/strong>鍖呭惈Emoji鎴栫敓鍍诲瓧的刄RL鏃犳硶ｇ‘澶</li> <li><strong>瑙ｅ喅锟?/strong>浣跨敤鏇村箍娉涚殑闆嗘鎸侊紝鎴栧皢鐗畩瀛鏇挎崲涓篈SCII瀛</li> </ul> <h2>涓冦�乁RL缂栫爜的渶浣冲疄锟�?/h2> <h3>1. 缂栫爜鏃舵満</h3> <ul> <li><strong>瀹㈡埛绔細</strong>鍦ㄥ彂閫佽姹傚墠瑰鏁拌繘琛锟�?/li> <li><strong>鏈嶅姟绔細</strong>鍦ㄦ帴鏀跺弬鏁板悗杩涜楠岃瘉鍜岃В锟?/li> <li><strong>厤锟?/strong>涓嶈鍦ㄥ凡缂栫爜的瓧绗︿涓婂啀娆＄锟�?/li> </ul> <h3>2. 瀛闆嗛�</h3> <ul> <li><strong>鎺ㄨ崘锟?/strong>粓浣跨敤UTF-8瀛锟�?/li> <li><strong>鍏煎鎬э</strong>繚鍓嶅悗绔娇ㄧ浉鍚岀殑锟�?/li> <li><strong>标准锟�?/strong>RFC 3986鎺ㄨ崘浣跨敤UTF-8</li> </ul> <h3>3. 瀹叏鑰冭</h3> <ul> <li><strong>杈撳叆岃瘉锟?/strong>瀵筓RL鍙傛暟杩涜涓ユ牸的鍏ラ獙锟?/li> <li><strong>闃叉娉ㄥ叆锟�?/strong>缂栫爜鍙互闃叉鏌簺绫诲的敞鍏ユ敾锟�?/li> <li><strong>XSS闃叉姢锟?/strong>鍦℉TML涓樉绀RL鍙傛暟鏃堕渶瑕侀澶锟�?/li> </ul> <h3>4. ц兘浼樺</h3> <ul> <li><strong>厤杩暱URL锟�?/strong>URL鏈暱搴﹂檺鍒讹紙父锟?048瀛锟�?/li> <li><strong>浣跨POST锟�?/strong>瀵簬澶ч噺鏁版嵁锛岃�檻浣跨敤POST鏂硶</li> <li><strong>鍘缉锟?/strong>鍦ㄦ煇浜涘満鏅笅鍙互鍘缉URL鍙傛</li> </ul> <h2>鍏�乁RL缂栫爜涓庡叾浠栫佺殑鍖哄</h2> <h3>1. URL缂栫 vs Base64缂栫</h3> <ul> <li><strong>URL缂栫爜锟?/strong>ㄤ簬缂栫爜URL涓殑鐗规畩瀛锛屼富瑕拡枃鏈暟锟?/li> <li><strong>Base64缂栫爜锟?/strong>ㄤ簬灏嗕簩杩涘埗鏁版嵁杞崲涓哄彲鎵撳嵃瀛锛屼笉涓撻棬ㄤ簬URL</li> </ul> <h3>2. URL缂栫 vs HTML缂栫</h3> <ul> <li><strong>URL缂栫爜锟?/strong>ㄤ簬URL涓殑缂栫</li> <li><strong>HTML缂栫爜锟?/strong>ㄤ簬HTML鍐呭涓殑瀛缂栫爜锛岄槻姝SS诲嚮</li> </ul> <h3>3. 缂栫爜灞傜骇</h3> <p>鍦╓eb�鍙戜腑锛屼笉鍚屽眰娆＄殑缂爜闇�瑕佹敞鎰忥</p> <ol> <li><strong>JavaScript灞傦</strong>浣跨encodeURIComponent缂栫爜URL鍙傛</li> <li><strong>HTTP浼犺灞傦</strong>URL宸茬粡浠TTP鍗忚瑙畾的牸忎紶锟�?/li> <li><strong>鏈嶅姟鍣ㄧ锟�?/strong>鏈嶅姟鍣ㄦ牴鎹厤缃殑瀛闆嗚В乁RL</li> <li><strong>鏁版嵁搴撳眰锟�?/strong>鏁版嵁浠ョ氬瓧绗﹂泦瀛樺</li> </ol> <h2>涔濄�佺粨锟?/h2> <p>URL缂栫爜鏄疻eb�鍙戜腑鏈�鍩虹浣嗕篃鏈�瀹琚拷瑙嗙殑鎶�鏈涓�銆傞�氳繃鏈枃的涔狅紝浣犲簲璇ュ凡缁忔帉鎻′簡URL缂栫爜的伐浣滃師鐞嗐�佺佽鍒欍�佸父瑙棶棰樹互鍙婃渶浣冲疄璺拷?/p> <p>鍦ㄥ疄闄紑鍙戜腑锛屾纭娇鐢║RL缂栫爜鍙互厤堝妫樻的棶棰橈紝濡備贡鐮侊拷?04閿欒銆佸畨鍏ㄦ紡娲炵瓑銆傝浣忎互涓叧閿偣锟�?/p> <ul> <li>鏍嵁浣跨敤鍦烘櫙夋encodeURI鎴杄ncodeURIComponent</li> <li>粓浣跨敤UTF-8瀛锟�?/li> <li>涓嶈瑰凡缂爜的瓧绗︿鍐嶆缂栫</li> <li>娉ㄦ剰淇濈暀瀛的勫锟?/li> <li>鍋氬ソ杈撳叆楠岃瘉鍜屽畨鍏ㄩ槻锟?/li> </ul> <p>屾湜鏈枃鑳藉姪浣犳洿濂藉湴鐞嗚В鍜屽簲鐢║RL缂栫爜鎶�鏈紝鍦ㄥ紑鍙戜腑鏇村姞績搴墜銆傚鏋滀綘闇�瑕佸揩熻繘琛RL缂栬В佹搷浣滐紝鍙互浣跨敤鎴戜滑的勫绾垮伐鍏凤紝瀹冩鎸佸绉嶇紪佹牸忥紝绠�鍗曟槗鐢拷?/p> <p style="font-size: 18px;"><strong>🦘憠绔嵆浣跨敤锟�?/strong><a href="../tools/url-encode.html" style="font-weight: bold;">URL 缂栬В锟�?/a></p> <div class="related-tools"> <h3>🦘洜锟�?鐩叧宸ュ叿鎺ㄨ崘</h3> <div class="tool-grid"> <div class="tool-card"> <h4>URL 缂栬В锟�?/h4> <p>缃戝潃涓庢枃鏈 URL 杞</p> <a href="../tools/url-encode.html">浣跨敤ュ</a> </div> <div class="tool-card"> <h4>Base64 缂栬В锟�?/h4> <p>鏂囨湰锟?Base64 鍙屽悜杞崲</p> <a href="../tools/base64.html">浣跨敤ュ</a> </div> <div class="tool-card"> <h4>JSON 鏍煎紡锟?/h4> <p>缇庡寲鍜岄獙锟�?JSON 鏁版</p> <a href="../tools/json.html">浣跨敤ュ</a> </div> <div class="tool-card"> <h4>MD5 鍔犲</h4> <p>灏嗕换鎰忔枃鏈浆鎹 MD5 鍝堝笇锟?/p> <a href="../tools/md5.html">浣跨敤ュ</a> </div> <div class="tool-card"> <h4>姝ｅ琛ㄨ忔祴锟�?/h4> <p>在线ｅ琛ㄨ忔祴璇曞伐锟?/p> <a href="../tools/regex-tester.html">浣跨敤ュ</a> </div> <div class="tool-card"> <h4>鏃堕棿鎴宠浆锟�?/h4> <p>绉掔骇鏃堕棿鎴充笌鏈湴鏃ユ湡浜掕</p> <a href="../tools/timestamp.html">浣跨敤ュ</a> </div> <div class="tool-card"> <h4>浜岀佺敓鎴愬</h4> <p>鏂囨/缃戝潃涓�閿浆浜岀锟�?/p> <a href="../tools/qrcode.html">浣跨敤ュ</a> </div> <div class="tool-card"> <h4>瀵嗙爜鐢熸垚锟�?/h4> <p>鍙皟闀害的畨鍏ㄥ瘑佺敓锟�?/p> <a href="../tools/password-generator.html">浣跨敤ュ</a> </div> </div> <div class="more-tools"> <a href="../index.html">🦘攳鏇村ュ</a> </div> </div> <div class="related-docs"> <h3>🦘摉鐩叧鏂囨。鎺ㄨ崘</h3> <ul class="doc-list"> <li> <h4><a href="base64-complete-guide.html">Base64缂栬В佸畬鍏ㄦ寚鍗楋細浠庡鐞嗗埌搴旂敤的勫叏鏂逛綅瑙ｆ</a></h4> <p>璇︾粏浠粛Base64缂栬В佺殑宸ヤ綔鍘熺悊銆佺佽繃绋�佸父瑙佸簲ㄥ満鏅�佸伐鍏蜂娇ㄦ妧宸э紝姪�鍙戣�叏闈㈡帉鎻ase64鎶�锟�?/p> </li> <li> <h4><a href="json-formatting-guide.html">�鍙戣�澶囷細JSON鏍煎紡鍖栧畬鍏ㄦ寚鍗椻�斺�斾粠娣蜂贡鍒版鏅殑鐬棿杞</a></h4> <p>璇︾粏浠粛JSON鏍煎紡鍖殑閲嶈с�佸父瑙棶棰樸�佸伐鍏蜂娇鐢ㄦ妧宸с�佽皟璇曠粡岋紝甯姪�鍙戣�粠娣蜂贡的凧SON鏁版嵁涓揩熺悊鍑哄ご锟?/p> </li> <li> <h4><a href="timestamp-converter-guide.html">鏃堕棿鎴宠浆鎹㈡�庝箞鍋氾紵10锟�?13锟�?Unix 鏃堕棿鎴冲湪绾胯浆鎹㈡寚锟�?/a></h4> <p>璁茶В10浣嶄13浣嶆椂闂存埑鍖哄埆銆佹闂存埑杞棩鏈熸柟娉曘�佸8灏忔椂的父瑙佸師鍥狅紝骞舵彁渚涘绾挎椂闂存埑杞崲ュ叿鍏ュ彛</p> </li> <li> <h4><a href="password-security-guide.html">你的嗙爜琚洍杩囧悧锛熷浣曞垱虹湡ｇ殑叏瀵嗙爜锟?/a></h4> <p>璇︾粏浠粛嗙爜叏的勯噸瑕佹�с�佸父瑙佸瘑佸畨鍏ㄨ鍖恒�佸浣曞垱虹湡ｅ畨鍏ㄧ殑瀵嗙爜锛屼互鍙婂浣曚娇ㄩ鏈哄瘑佺敓鎴愬櫒鎵归噺鐢熸垚叏瀵嗙</p> </li> </ul> <div class="all-docs"> <a href="index.html">🦘搫鎵�鏈枃锟�?/a> </div> </div> <div class="footer"> <a href="../index.html" class="back-link">杩斿洖棣</a> </div> </div> </div> </body> </html>