JavaScript中的URL编码：3种拯救您网站的方法

引言：为什么URL编码不是枯燥的理论，而是您应用程序的救命稻草

想象这样一个场景：您正在用JavaScript编写一个Web应用程序，用户输入了搜索查询"JavaScript & Node.js: best practices"。您将此文本作为GET请求参数在URL中传递。打开浏览器控制台——出现了一个错误。或者更糟的是，请求发送成功了，但服务器无法理解它，用户看到的不是搜索结果，而是一个空白页面。

听起来很熟悉？如果是的话——这篇文章就是为您准备的。如果不是——它仍然适合您，因为迟早您会遇到这个问题。JavaScript中的URL编码是Stack Overflow上最热门的问题之一（浏览量数以万计），这并非没有原因。这是一个区分专业开发者和初学者的微小细节。

今天我们将介绍在JavaScript中对URL进行编码的三种方法，学习如何为每项任务选择合适的工具，并了解Web开发者日常工作中的真实示例。我们开始吧！

什么是URL编码以及为什么需要它

在编写代码之前，让我们先了解理论知识。URL（统一资源定位符）具有严格的结构。只允许某些字符：拉丁字母、数字以及一些特殊字符（-、_、.、~）。但是，空格、西里尔字母、像&、?、#这样的符号以及其他字符是被禁止的。

当我们尝试在URL中传递此类字符时，浏览器或服务器可能会误解请求。例如，查询字符串中的&字符用于分隔参数。如果它出现在参数值内部，逻辑就会被破坏。

解决方案是URL编码（百分号编码）。禁止字符被替换为类似%XX的序列，其中XX是UTF-8编码中该字符的十六进制代码。例如，空格变成%20，西里尔字母"а"变成%D0%B0。

在JavaScript中，有三种内置机制用于此目的。让我们逐一分析它们。

方法1：encodeURI() — 用于完整URL

encodeURI()函数设计用于编码完整的URL。它会替换除URI语法组成部分之外的所有字符：:、/、?、#、&、=等。

语法

encodeURI(uri)

示例

const url = "https://pythonlib.ru/search?q=JavaScript & Node.js";\nconst encoded = encodeURI(url);\nconsole.log(encoded);\n// 结果: "https://pythonlib.ru/search?q=JavaScript%20&%20Node.js"\n

注意：encodeURI()编码了空格，但没有处理&、?和=字符。这对于整个URL是正确的，但对于参数来说是危险的。如果我们的查询在参数值内部包含&字符，它会保持不变并破坏查询字符串。

何时使用

\n
• 当您需要编码整个URL时（例如，传递给window.location）
\n
• 当URL不包含带有潜在危险字符的用户数据时
\n

何时不使用

\n
• 用于编码单个查询参数
\n
• 如果URL包含用户输入（表单、搜索、评论）
\n

方法2：encodeURIComponent() — 用于参数和值

这是您主要的日常工具。encodeURIComponent()会编码所有字符，除了字母、数字以及-、_、.、~。它甚至会编码作为URI语法一部分的字符——&、?、=、#等。