JavaScript中URL编码方法详解

技术背景

在Web开发中，URL中包含特殊字符时，为了确保URL的正确性和安全性，需要对其进行编码。URL编码也称为百分比编码，它会将特殊字符用%加上其对应的十六进制编码来表示。JavaScript提供了多种内置函数来实现URL编码，了解这些函数的使用场景和区别至关重要。

实现步骤

1. 认识URL编码函数

JavaScript中常用的URL编码函数有escape()、encodeURI()和encodeURIComponent()。

• escape()：不会编码@*/+。
• encodeURI()：不会编码~!@#$&*()=:/,;?+'。
• encodeURIComponent()：不会编码~!*()'。

2. 选择合适的编码函数

• 传递URL作为GET参数：如果要将一个URL作为另一个页面的GET参数传递，应使用escape或encodeURIComponent，而不是encodeURI。因为encodeURI不会编码很多在URL中有语义重要性的字符，如#、?和&。
• 编码URI组件：如果要将某个内容安全地作为URI的一个组件（如查询字符串参数），应使用encodeURIComponent()。
• 编码完整URL：如果要对整个URL进行编码，应使用encodeURI()。

3. 防止双重编码

在处理用户输入的可能已经编码过的URL时，为防止双重编码，可先解码再编码。例如：

encodeURI("abc%20xyz 123"); // 错误："abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")); // 正确："abc%20xyz%20123"

4. 现代解决方案

自2021年起，URLSearchParams API被引入，可用于处理URL查询参数。示例如下：

const queryParams = { param1: 'value1', param2: 'value2' };
const queryString = new URLSearchParams(queryParams).toString();
// 'param1=value1&param2=value2'

5. 其他工具和方法

• qs npm包：使用qs.stringify()方法可以方便地对JavaScript对象进行URL编码。

const qs = require('qs');
qs.stringify({a: "1=2", b: "Test 1"}); // 得到 a=1%3D2&b=Test+1

• jQuery的$.param()方法：可以对对象进行URL编码，将字段映射到值。

$.param({a: "1=2", b: "Test 1"}); // 得到 a=1%3D2&b=Test+1

• URL()接口：使用URL()接口可以更安全地构建URL。

const baseURL = 'http://example.com/index.html';
const myUrl = new URL(baseURL);
myUrl.searchParams.append('param', '1');
myUrl.searchParams.append('anotherParam', '2');
const myOtherUrl = new URL(baseURL);
myOtherUrl.searchParams.append('url', myUrl.href);
console.log(myUrl.href);
// 输出: http://example.com/index.html?param=1&anotherParam=2
console.log(myOtherUrl.href);
// 输出: http://example.com/index.html?url=http%3A%2F%2Fexample.com%2Findex.html%3Fparam%3D1%26anotherParam%3D2

核心代码

encodeURIComponent()的使用

const myUrl = "http://example.com/index.html?param=1&anotherParam=2";
const myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);
console.log(myOtherUrl);

严格遵循RFC 3986的编码函数

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

最佳实践

• 使用encodeURIComponent()：在处理URL的查询参数时，优先使用encodeURIComponent()对参数值进行编码。
• 使用URL()接口：构建URL时，使用URL()接口可以避免很多编码问题，提高代码的安全性和可读性。
• 避免双重编码：在处理用户输入的URL时，先检查是否已经编码，如有必要，先解码再编码。

常见问题

1. encodeURIComponent()和encodeURI()的区别

encodeURIComponent()用于编码URI的组件，会对大多数特殊字符进行编码；而encodeURI()用于编码整个URI，不会对一些在URI中有特殊含义的字符进行编码，如/、?、&等。

2. 双重编码问题

如果对已经编码的URL再次进行编码，会导致双重编码，使URL变得混乱。解决方法是在编码前先进行解码。

3. escape()函数的问题

escape()函数已被弃用，且不会对+字符进行编码，在服务器端会将+解释为空格，同时它也不能正确编码非ASCII字符。因此，不建议使用escape()函数进行URL编码。