JavaScript转义字符全解析：字符串、正则、HTML与URL

提及转义字符，多数人首先联想到的是反斜杠，这是绝大多数编程语言通用的标准写法。

从定义来看，转义字符旨在改变原有字符的含义，从而生成新的字符表现，常用于特殊符号的显示或特定编码环境。

除了反斜杠，前端开发中还涉及其他几种常见的转义形式，本文将对此进行归纳总结。

字符串中的转义

利用反斜杠表示转义字符主要应用于字符串场景，理解此概念需结合字符集与编码知识，具体可参考前端开发中关于字符编码的解析。

字符集即字符的集合，主流包括ASCII字符集和Unicode字符集等：

ASCII集中的任意字符均可通过反斜杠配合数字编码进行转义，部分特殊字符亦支持反斜杠加字母的形式。

Unicode同样支持转义，采用反斜杠配合码点的方式。鉴于Unicode涵盖了ASCII所有字符且编码一致，二者均属于编码转义范畴，而当前前端编程已全面采用Unicode字符。

通常情况下，反斜杠（）在字符串中具有特殊含义，它与后续字符组合以表示特定特殊字符，因此被称为转义符。

反斜杠后可接的字符类型大致包括以下几种：

• 字母
• 三位八进制
• x 加上 两位十六进制
• Unicode码点

字母

最基础的转义形式为：使用反斜杠配合字母，用于表示无法直接输入或具有特殊含义的字符，常见类型如下：

• \b 后退键
• \f 换页符
• \n 换行符
• \r 回车键
• \t 制表符
• \v 垂直制表符

以往在字符串拼接操作中，常使用\n、\t等符号：

  "\n      " +
  console.log('test') +
  "\n    "

需注意，上述字母属于可应用于转义的特殊字符。

若反斜杠后跟随非特殊字母，系统将忽略反斜杠，多数字符亦遵循此忽略规则：

'\a' // 'a'
'\"' // '"'
'\?' // '?'

十六进制数字

十六进制转义更为常用，其规则为：\x<hex>，在\x后紧跟2位十六进制数。

由于仅限两位，取值范围为0x00-0xFF，故该方式仅能输出265种字符，具体分布为：

• 0x00-0x7F 与ASCII码一致
• 0x80-0x9F 表示控制字符
• 0xA0-0xFF 表示文字字符

'\xA9' // '©'
'\x75' === 'u' // true
'\x67' // 'g'

八进制数字

反斜杠后接3位八进制数()，即代表一个转义字符：

'\251' // '©'
'\165' === 'u' // true
'\106' // 'F'

取值范围为000-377，共计256种字符，其中包含了全部ASCII码。

八进制与十六进制可转义的字符范围相同，只需进行进制转换即可，详见前文关于JavaScript中进制与进制转换的解析。

在JS中，采用这两种方式的转义字符是相等的：

'\xA9' === '\251' // true
'\200' === '\x80' // true

Unicode码点

涉及Unicode时，首要明确JS字符串基于Unicode的UTF-16编码方式。

Unicode字符规定了码点与字符平面。

码点使用从U+0000到U+10FFFF的范围来标识所有字符。

若直接通过码点转义所有Unicode字符，规则为：\u{<hex>}，在\u后跟随1-6位十六进制数：

'\u{A9}' // '©'
'\u{597d}' // '好'
'\u{1f604}' // '😄'

字符平面分为基本平面与非基本平面。

针对基本平面（65536个字符）的转义规则为：\u<hex>，在\u后跟随4位十六进制数：

'\u00A9' // "©"
'\u0075' === 'u' // true
'\u597d' // '好'

对于非基本平面字符，需采用UTF-16码元规则，通常涉及两个码元：\u<hex>\u<hex>，在\u后各跟随4位十六进制数：

'\uD83D\uDE04' // '😄'
'\uD83C\uDF34' // '🌴'

只要获取字符的Unicode编号码点，即可通过此方式转义所有字符。

正则表达式中的转义

正则表达式中包含大量具有特定功能的特殊符号，若要匹配这些符号本身，则需使用转义。

此处的转义字符同样使用反斜杠，后接需匹配的符号即可，例如：\+ 用于匹配加号。

在正则表达式中，需反斜杠转义以进行匹配的字符共计12个：^ . [ $ ( ) | * + ? { \，这些均为正则特殊字符。

/5$/.test('5$') // false
/5\$/.test('5$') // true

上述代码中，$符号添加转义方可匹配成功，否则无法匹配。

使用RegExp方法时，正则参数为字符串，此时反斜杠\需使用2个，因为字符串内部会先执行一次转义：

(new RegExp('5$')).test('5$') // false
(new RegExp('5\$')).test('5$') // false
(new RegExp('5\\$')).test('5$') // true

上述代码中，仅第三行因使用两个反斜杠而能成功转义，得到正确结果。

HTML中的转义

HTML中的转义字符亦较为常见，主要包含三种形式。

最常见的是基于实体名称：

& 后接实体名称，再跟分号 ;：

空格 大于号 > >

实体名称转义早期旨在解决HTML中特殊字符的显示问题，例如小于号 <在HTML中作为元素标签的一部分使用，若直接输入特殊字符会导致错误。

但在现代浏览器中，大于号、小于号等符号已能正常显示，可不使用转义字符。

另两种形式基于Unicode码点：

&#x 后接十六进制码点，再跟分号 ;：

😄 => 😄
好 => 好
& => &

&# 后接十进制码点，再跟分号 ;：

😄 => 😄
好 => 好
& => &

基于实体名称转义的字符同样包含在Unicode字符集中，因此也可通过码点进行转义。

HTML中最常用的转义字符可参考下方整理的表格：

URL转义字符

此外，Web开发中URL链接亦涉及编码转义，特别是针对URL元字符和中文等特殊字符：http://baidu.com/中国 编码转义为 http%3A%2F%2Fbaidu.com%2F%E4%B8%AD%E5%9B%BD

可使用encodeURIComponent 和 decodeURIComponent 对URL链接进行编解码处理。

URL中的转义规则：依据系统默认编码（通常为UTF-8），使用百分号(%)后接两位十六进制数。

实际转义基于Unicode字符的码点，但与字符串不同，此处通常采用UTF-8编码方式。

URL部分元字符的转义示例：

中文等特殊字符则被转义为多个组合：

encodeURIComponent('http://baidu.com/中国😄') // 'http%3A%2F%2Fbaidu.com%2F%E4%B8%AD%E5%9B%BD%F0%9F%98%84'

上述代码中，

包含元字符的转义：':' => %3A、'/' => %2F，

而中文则转义为：中 => %E4%B8%AD、国 => %E5%9B%BD，

表情符号转义为：😄 => %F0%9F%98%84。

至此，关于JavaScript中转义字符的使用介绍完毕，更多相关JavaScript转义字符内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！