js 转义字符及URI编码详解

URL中的转义字符

当URL的参数中出现诸如+，空格，/，?，%，#，&，=等特殊字符串符号时，因为上述字符有特殊含义，导致服务器端无法正确解析参数，如何处理？解决办法：将这些字符转化成服务器可以识别的字符。

如果要在URL中传递特殊符号的原本意义，要对他们进行编码。编码的格式为：%加字符的ASCII码(16进制)，例如空格的编码值是"%20"。

URL中特殊符号的用途及普通意义的编码

+	URL 中+号表示空格	%2B
空格	URL中的空格可以用+号或者编码	%20
/	分隔目录和子目录	%2F
?	分隔实际的URL和参数	%3F
%	指定特殊字符	%25
#	表示书签	%23
&	URL 中指定的参数间的分隔符	%26
=	URL 中指定参数的值	%3D

HTML中的转义字符

转义字符串(Escape Sequence)也称字符实体(Character Entity)。在HTML中，“<”和“>”符号用来表示HTML标签，不能当作普通的符号来使用。如果要在HTML文档中使用这些特殊符号原有的意义，就需要定义对应的转义字符串。当浏览器遇到这类转义字符时就会解释为真实的字符而不是特殊用途。另外有些字符在ASCII字符集中没有文字代号，只能用转义字符串来表示，如回车换行符，退格键等。

字符	十进制	转义字符
"	"	"
&	&	&
	<	<
>	>	>
不断开空格(non-breaking space)

JavaScript中的转义

JavaScript 中有些字符有特殊用途，如果字符串中想使用这些字符原来的含义，需要使用反斜杠对这些特殊符号进行转义。

正则中也有需要转义的字符：* . ? + $ ^ [ ] ( ) { } | \ /，也是通过\反斜杠进行转义。但是中括号里并不是元字符，不需要转义。

在js中字符串形式的正则表达式匹配一个反斜杠要用四个反斜杠'\\\\'， 第一个斜杠是js字符串的转义符，第二个斜杠是斜杠本身，第三个斜杠是js字符串的转义符，第四个斜杠是斜杠本身。将第二、四个反斜杠转为正则中的斜杠后，前面一个为正则中的转义符，将后者变为普通符号。字符串形式的正则表达式里的斜杠也是特殊符号，若要当普通符号使用，也需要转义，用“\\”标示。因为js中反斜扛为特殊符号（转义字符），js字符串里面表示斜杠需要一次转义：“\\”。

在比如：字面量形式/\{.*\}/---->字符串形式'\\{.*\\}'。因为{号为正则中的特殊符号，需要加\转义，而字符串中的\又是js中的特殊符号，需要再加一个\进行转义。

注意正则的字面量形式只需要对正则中的特殊符号转义，不需要对js的特殊符号转义。

代码	输出的普通字符
\'	单引号
\"	双引号
\&	和号
\\	反斜杠
\n	换行符
\r	回车符
\t	制表符
\b	退格符
\f	换页符

js中对字符串进行编码的方法

1.encodeURI()把字符串作为 URI整体进行编码，所以URI组件中的特殊分隔符号（;/:@&=+$?#），encodeURI() 函数不会进行转义。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( )

encodeURI("http://www.w3school.com.cn")

输出http://www.w3school.com.cn

2.encodeURIComponent()把字符串作为 URI 组件的一部分（如path/query/fragment等）进行编码，所以用于分隔 URI 各个部分的特殊分隔符号（;/?:@&=+$,#）也会被转义。返回值中某些字符将被十六进制的转义序列替换。该方法也不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( )

encodeURIComponent("http://www.w3school.com.cn")

输出http%3A%2F%2Fwww.w3school.com.cn

3.decodeURI()/decodeURIComponent()解码URI中被转义的字符

decodeURIComponent(%E4%BD%A0%E5%A5%BDjavascript);

输出你好javascript

4.escape()用于对字符串进行编码，并返回编码字符串。但目前已不推荐使用该函数对URI进行编码。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！