JS 转义字符及 URI 编码详解

在 JavaScript 编程中，我们经常需要对一些字符进行编码或转义，以确保它们能够被正确地处理和显示。同时，对于某些需要作为 URL 参数传递的字符，也需要使用 URI 编码进行处理。本攻略将就这两个问题进行详细的讲解。

转义字符

在 JavaScript 中，我们可以通过使用转义字符来表示一些特定的字符。下表列出了一些常用的转义字符及其对应的字符意义：

转义字符	含义
\n	换行符
\r	回车符
\t	制表符
\/	斜杠（/）
\\"	双引号（"）
\'	单引号（'）
\uXXXX	Unicode 码点为 XXXX 的字符

例如，如果我们想要表示一个双引号字符（"），就需要使用 \" 的方式进行转义。示例如下：

var str = "这是一个\"双引号\"字符。";
console.log(str);
// 输出：<这是一个"双引号"字符。>

URI 编码

URI（Uniform Resource Identifier），统一资源标识符，是一种用来标识某一互联网资源的字符串表示方法。在将某些字符作为 URL 参数时，需要使用 URI 编码将其进行替换，以防止出现一些问题。下表列出了需要进行 URI 编码的一些特殊字符：

字符	含义	编码方式
!	惊叹号	%21
#	井号	%23
$	美元符号	%24
&	与符号（连接多个参数）	%26
'	单引号	%27
(	左括号	%28
)	右括号	%29
*	星号	%2A
+	加号	%2B
,	逗号	%2C
/	斜杠	%2F
:	冒号	%3A
;	分号	%3B
=	等号	%3D
?	问号	%3F
@	艾特符号（邮箱）	%40
%	百分号	%25
空格	空格字符	%20
其他	其他字符的 Unicode 码	%HH

其中，“%HH”表示该字符的 Unicode 编码的十六进制数值。例如，字符“中”的 Unicode 码为 U+4E2D，它的十六进制数值为 4E2D，所以在 URL 参数中需要使用 %4E2D 代替。

在 JavaScript 中，我们可以使用 encodeURIComponent() 函数对一个字符串进行 URI 编码。例如：

var str = "这是一段需要进行 URI 编码的字符：$&+,:;=?@#%";
var encodedStr = encodeURIComponent(str);
console.log(encodedStr);
// 输出：<这是一段需要进行 URI 编码的字符%EF%BF%BD%26%2B%2C%3A%3B%3D%3F%40%23%25>

需要注意的是，对于一些在 URL 中具有特殊含义的字符，例如“/”、“?”等，我们在进行 URI 编码时需要将它们保留，否则 URL 很可能无法正确解析。此外，在解析 URL 参数时，我们也需要对编码过的字符串进行解码，可以使用 decodeURIComponent() 函数进行解码。

示例

示例1：对 URL 中的参数进行编码

假设我们要向某个页面传递两个参数，分别是“姓名”和“年龄”，我们可以使用以下的方式进行 URL 拼接：

var name = "张三";
var age = 20;
var url = "http://example.com/page.html?name=" + name + "&age=" + age;

但是，在这种方式中，如果姓名包含空格或其他特殊字符，或者年龄不是一个数字，那么 URL 就不能正确解析。所以，我们需要使用 URI 编码对参数进行处理：

var name = "张 三";
var age = "20岁";
var encodedName = encodeURIComponent(name);
var encodedAge = encodeURIComponent(age);
var url = "http://example.com/page.html?name=" + encodedName + "&age=" + encodedAge;

这样，URL 就会变成：

http://example.com/page.html?name=%E5%BC%A0%20%E4%B8%89&age=20%E5%B2%81

示例2：将本地文件转换为 base64 编码

有时候，我们需要将本地的文件内容进行编码，并以字符串形式传递给后端。这时，我们可以使用 FileReader 对象来读取文件，并使用 btoa() 函数将内容进行 base64 编码，例如：

var fileInput = document.getElementById("fileInput");
var reader = new FileReader();
reader.onload = function(e) {
  var base64Str = btoa(e.target.result);
  console.log(base64Str);
};
reader.readAsBinaryString(fileInput.files[0]);

在这个例子中，我们首先通过 HTML 表单中的“file”类型 input 获取了用户选择的文件，然后使用 FileReader 对象读取文件的内容（这里使用了 readAsBinaryString() 方法），并在读取成功后将内容进行 base64 编码，最终输出编码后的字符串。这个字符串可以在后续的 HTTP 请求中作为参数发送给服务器端。