ECMAScript 2020：理解不同的 URL 编码方式-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，URL 编码是一个重要的概念。在浏览器和服务器之间传递数据时，URL 编码可以确保数据以安全和可预测的方式传输。在 ECMAScript 2020 中，有多种 URL 编码方式可供使用，但是每种编码方式都有其自己的用途和优缺点。在本篇文章中，我们将深入探讨不同的 URL 编码方式，以及它们如何适用于不同的场景。

URL 编码

在讨论不同的 URL 编码方式之前，我们需要先了解什么是 URL 编码。URL 编码也被称为百分号编码（percent-encoding），它将特殊字符转换为 % 和两个十六进制数字。例如，一个空格字符将被编码为 %20。编码后的字符可以安全地传输到浏览器或服务器。

在 ECMAScript 2020 中，有两种内置的 URL 编码方式：encodeURIComponent() 和 encodeURI()。让我们来看一下它们的区别。

encodeURI() vs. encodeURIComponent()

encodeURI() 方法编码整个 URL，但是不包括协议、主机名和端口号。因此，它不会编码冒号（:）、斜杠（/）、问号（?）、哈希符号（#）等字符，这些字符在 URL 中需要保留。下面是一个使用 encodeURI() 方法的示例：

const url = 'https://www.example.com/?q=' + encodeURI('你好，世界！');

上面的代码将 "你好，世界！" 编码为 "%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C%EF%BC%81"，然后将其添加到查询字符串 "q" 中。注意，encodeURI() 方法没有对冒号、斜杠和问号进行编码。

与此相反，encodeURIComponent() 方法编码所有字符，包括冒号、斜杠和问号。下面是一个使用 encodeURIComponent() 方法的示例：

const url = 'https://www.example.com/?q=' + encodeURIComponent('你好，世界！');

上面的代码将 "你好，世界！" 编码为 "%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C%EF%BC%81"，然后将其添加到查询字符串 "q" 中。与 encodeURI() 方法不同的是，encodeURIComponent() 方法编码了冒号、斜杠和问号字符。

应用场景

在选择不同的 URL 编码方式时，应该考虑到不同的应用场景。通常情况下，encodeURI() 方法用于编码整个 URL，而 encodeURIComponent() 方法用于编码特定的查询字符串或参数。下面是一些使用示例：

编码查询字符串或参数

const username = 'Alice';
const password = 'P@ssw0rd!';
const url = 'https://www.example.com/login?' + encodeURIComponent('username') + '=' + encodeURIComponent(username) + '&' + encodeURIComponent('password') + '=' + encodeURIComponent(password);

上面的代码将用户名和密码编码为查询字符串，并添加到 URL 中。注意，特殊字符如 "！" 和 "@" 都被编码了。

防止 XSS 攻击

const user_input = '<script>alert("XSS attack!");</script>';
const sanitized_input = encodeURIComponent(user_input);
const url = 'https://www.example.com/?input=' + sanitized_input;

上面的代码将用户输入编码为查询字符串，并添加到 URL 中，从而防止 XSS 攻击。由于 encodeURIComponent() 方法将 "<" 和 ">" 这样的特殊字符转换为 "%3C" 和 "%3E"，因此用户输入的脚本不能被执行。

嵌套的参数

// javascriptcn.com code example
const params = {
  name: 'Alice',
  address: {
    street: '123 Main St.',
    city: 'Anytown',
    state: 'CA'
  }
};
const url = 'https://www.example.com/data?' +
  encodeURIComponent('name') + '=' + encodeURIComponent(params.name) + '&' +
  encodeURIComponent('address') + '[street]=' + encodeURIComponent(params.address.street) + '&' +
  encodeURIComponent('address') + '[city]=' + encodeURIComponent(params.address.city) + '&' +
  encodeURIComponent('address') + '[state]=' + encodeURIComponent(params.address.state);

上面的代码演示了如何编码嵌套的参数。注意，在地址中使用 "[]" 表示一个嵌套的对象。

结论

在本篇文章中，我们深入探讨了 ECMAScript 2020 中不同的 URL 编码方式。encodeURI() 方法用于编码整个 URL，而 encodeURIComponent() 方法用于编码特定的查询字符串或参数。根据不同的应用场景，我们可以选择不同的编码方式来确保数据以安全和可预测的方式传输。通过逐个字符进行编码，我们可以防止特殊字符和脚本被执行，从而提高 Web 应用程序的安全性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67372027317fbffedf0843a7