JavaScript URL几种编码方式详解

在JavaScript中，对URL进行编码是一项常见的任务。URL编码是将URL中的字符串转换为可安全传输的格式的过程。在编码URL之前，需要了解几种不同的URL编码方式以及它们的适用场景。

encodeURIComponent()

encodeURIComponent() 是Javascript中常用的编码函数，可以将 URL 中除了字母、数字和特定字符外的所有字符转换为 UTF-8 格式进行编码。这样做可以确保 URL 可以被网络传输并被正确解码。下面是使用 encodeURIComponent() 的示例：

let text = "Hello, World!";

console.log(encodeURIComponent(text));
// 输出: "Hello%2C%20World%21"

encodeURI()

与 encodeURIComponent() 不同的是，encodeURI() 函数会忽略特定字符的编码，例如 ; , / ? : @ & = + $ #，这些字符在 URL 中具有特殊含义，因此需要被保留。下面是使用 encodeURI() 的示例：

let url = "https://www.example.com/path;param?query=hello#world#";

console.log(encodeURI(url));
// 输出: "https://www.example.com/path;param?query=hello#world#"

escape()

escape() 是最古老的 URL 编码方式，在较早的浏览器版本中仍然可用。此函数对除了字母、数字和下划线外的所有字符进行编码。可能会存在一些不安全的字符，如 ', ", <, > 和 {} 等，这些字符可能被攻击者用于注入攻击。因此，更好的做法是使用 encodeURIComponent() 或 encodeURI() 函数。下面是使用 escape() 的示例：

let text = "Hello, World!";

console.log(escape(text));
// 输出: "Hello%2C%20World%21"

综上所述，可以根据场景选择适当的 URL 编码方式，以保证 URL 安全传输。

示例

下面是一个实际示例，在表单中提交URL参数。假设一个用户在输入框中输入了以下 URL：

https://www.example.com/search?q=JavaScript Tutorial

为了防止输入框中的数据被篡改，必须对其进行编码。可以使用 encodeURIComponent() 对输入框的值进行编码：

<form action="/search">
  <label for="query">查询:</label>
  <input type="text" name="q" id="query">

  <input type="submit" value="查询">
</form>

<script>
  let query = document.getElementById("query").value;
  let encodedQuery = encodeURIComponent(query);
  let url = "/search?q=" + encodedQuery;

  console.log(url);
  // 输出: "/search?q=JavaScript%20Tutorial"
</script>

使用 encodeURIComponent() 函数确保 URL 可以被正确解码。

再看一个实际例子，在JavaScript中使用 fetch() 发送POST请求，用于将用户输入的数据发送到服务器。同样需要对数据进行编码，以确保数据可以安全传输。下面是一个示例：

const url = 'https://api.example.com/user';
const data = { username: 'john.doe', password: '12345' };

// 编码数据
const encodedData = encodeURIComponent(JSON.stringify(data));

// 发送POST请求
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: encodedData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个例子中，JSON.stringify() 用于将 JavaScript 对象转换为 JSON 格式。然后使用 encodeURIComponent() 将 JSON 字符串进行编码，并将其作为请求体发送到服务器。