轉義字符在前端開發中的詳細介紹

說起轉義字符，大家最先想到的肯定是使用反斜杠，這也是我們最常見的，很多編程語言都支持，
轉義字符從字面上講，就是能夠轉變字符原本的意義，得到新的字符，常用在特殊字符的顯示以及特定的編碼環境中，
除了反斜杠以外，在前端開發中，還有其他幾種轉義字符，也是較常見的，本文將對這些做一個總結，

字串中的轉義

使用反斜杠來表示轉義字符時，主要是在字串中使用，這里就需要了解字符集和編碼等知識，具體可見前文，

字符集就是字符的集合，最常見的 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碼，

八進制和十六進制能轉義的字符是一樣的，進行進制轉換即可，見前文，
在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中的特殊的字符顯示問題，比如小于號 <在THML中是作為元素標簽的一部分使用的，作為特殊字符，直接輸入會出錯，

但目前在現代瀏覽器上，已經能正常顯示大于小于號這些符號，可以不使用轉義字符，

另兩種是基于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，

標籤：其他

上一篇：JS值和型別（必學知識點總結）

下一篇：前端使用 fetch() 流式下載.mp4視頻檔案，跟蹤進度