用 JavaScript 编码 URL？

在 Web 开发中，URL 是一个非常重要的概念。URL 是用来标识某个资源的字符串，包含协议、主机名、路径和查询参数等信息。但是，由于 URL 中可能会包含一些特殊字符，如空格、中文字符、特殊符号等，这些字符需要进行编码才能正确地传递和处理。

JavaScript 提供了一些内置函数，可以方便地对 URL 进行编码和解码。本文将介绍其中两个函数 encodeURI 和 encodeURIComponent，并通过示例代码演示它们的用法，帮助读者更好地理解和掌握这些函数。

encodeURI

encodeURI 函数用于将整个 URL 进行编码，不会编码用于分隔协议、主机名、路径和查询参数的特殊字符（如冒号、斜杠、问号等）。如果 URL 中包含中文字符或其他特殊符号，则这些字符也会被编码为对应的十六进制字符序列。

示例代码：

const url = "https://www.example.com/查询参数?name=张三&age=18";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // https://www.example.com/%E6%9F%A5%E8%AF%A2%E5%8F%82%E6%95%B0?name=%E5%BC%A0%E4%B8%89&age=18

上述代码中，我们定义了一个包含中文字符和查询参数的 URL，并使用 encodeURI 函数对其进行编码。可以看到，中文字符和查询参数都被正确地转换成了十六进制字符序列。

encodeURIComponent

encodeURIComponent 函数用于将 URL 中的特殊字符进行编码，包括分隔协议、主机名、路径和查询参数的特殊字符。如果 URL 中包含中文字符或其他特殊符号，则这些字符也会被编码为对应的十六进制字符序列。

示例代码：

const url = "https://www.example.com/查询参数?name=张三&age=18";
const encodedUrl = encodeURIComponent(url);
console.log(encodedUrl); // https%3A%2F%2Fwww.example.com%2F%E6%9F%A5%E8%AF%A2%E5%8F%82%E6%95%B0%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D18

上述代码中，我们同样使用包含中文字符和查询参数的 URL，并使用 encodeURIComponent 函数对其进行编码。可以看到，所有特殊字符都被正确地转换成了对应的十六进制字符序列。

总结

encodeURI 和 encodeURIComponent 是 JavaScript 中用于 URL 编码的两个内置函数。它们的区别在于 encodeURI 不会编码一些特殊字符，而 encodeURIComponent 会将 URL 中的所有特殊字符都进行编码。

在实际开发中，我们需要根据具体的情况选择合适的编码函数。如果我们需要编码整个 URL，建议使用 encodeURI 函数；如果我们只需要编码其中的某些部分，建议使用 encodeURIComponent 函数。

希望本文能对读者理解和掌握 URL 编码有所帮助。

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