一次用 AJAX 发送内容给后端的时候，发现后端接收到的内容并不完整。和发送前的内容对比了一下，发现内容中包含一个 & ，从 & 开始内容就被截断了，只包含 & 之前的内容。

因为 URL 的参数是使用 & 连接，内容中包含 & 可能会被误认为是地址，会导致内容从 & 开始被截断。要解决这个问题就需要去除内容中的 & ，对内容进行 URL 编码后即可去除 & 。下面简单写一下 URL 编码和解码。

encodeURI() 函数

encodeURl 函数的功能是对 URL 进行编码，用法如下：

var str = '这是中文';  //  编码前的字符串
var urlStr = encodeURI(str);  //  编码
console.log(urlStr);  //  输出编码后的字符串

编码后的内容如下：

%E8%BF%99%E6%98%AF%E4%B8%AD%E6%96%87

不过 encodeURI 对于 URL 中的特殊符号 例如 / & = 之类的是不会编码的。

下面用 encodeURI 来编码一个 URL 地址：

var str = 'https://www.misterma.com/?s=搜索&page=1';
var urlStr = encodeURI(str);
console.log(urlStr);

编码后的内容如下：

https://www.misterma.com/?s=%E6%90%9C%E7%B4%A2&page=1

可以看到只有中文部分被编码，其它部分还是一样的。

decodeURI() 函数

decodeURI 函数的功能是对 encodeURI 编码后的字符串进行解码。用法如下：

var urlStr = '%E8%BF%99%E6%98%AF%E4%B8%AD%E6%96%87';  //  URL 编码后的字符串
var str = decodeURI(urlStr);  //  解码
console.log(str);  //  在控制台输出解码后的内容

解码后的字符串如下：

这是中文

encodeURIComponent() 函数

encodeURIComponent 函数的功能是对字符串进行 URL 编码。和 encodeURI 不一样的地方就是 encodeURIComponent 会对所有的符号进行编码，包括 & 和 = 。

用法如下：

var str = 'https://www.xx.com?s=搜索&page=1';  //  编码之前的字符串
var urlStr = encodeURIComponent(str);  //  URL 编码
console.log(urlStr);  //  输出编码后的字符串

编码后的内容如下：

https%3A%2F%2Fwww.xx.com%3Fs%3D%E6%90%9C%E7%B4%A2%26page%3D1

encodeURIComponent 比较适合用来给需要通过 AJAX 发送的内容进行 URL 编码，通过 encodeURIComponent 编码后即可去除 & 之类的特殊字符。如果是通过 URL 拼接的方式来拼接内容的话，只需要编码内容部分。

decodeURIComponent() 函数

decodeURIComponent 函数的功能是对 encodeURIComponent 编码后的字符串进行解码。

用法如下：

var urlStr = 'https%3A%2F%2Fwww.xx.com%3Fs%3D%E6%90%9C%E7%B4%A2%26page%3D1';
var str = decodeURIComponent(urlStr);  //  解码
console.log(str);  //  在控制台输出解码后的字符串

解码后的内容如下：

https://www.xx.com?s=搜索&page=1

以上就是 JavaScript 的 URL 编码和解码。