跳脫字元在前端開發中的詳細介紹

jimojianghu發表於2023-01-28
字元前端

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

字串中的轉義

使用反斜槓來表示跳脫字元時，主要是在字串中使用。這裡就需要了解字符集和編碼等知識，具體可見前文。

字符集就是字元的集合，最常見的 ASCII字符集、Unicode字符集等：
ASCII的任一個字元都可以被轉義，使用的就是反斜槓加上數字編碼，特殊的也能使用反斜槓加上字母。
Unicode，也能進行轉義，使用則是反斜槓加上碼點。由於Unicode包含了ASCII的所有字元，且編碼一致，所以都可算編碼轉義，而現在前端程式設計所涉及到的已經都是Unicode字元。
字符集和字元編碼等具體知識，可見博文前端開發中需要搞懂的字元編碼知識。

一般，反斜槓（\）在字串中有特殊的含義，用來和後面的字元一起組合表示一些特殊字元，所以又被稱為轉義符。

反斜槓後面可以跟著的字元大致有以下幾種：

  • 字母
  • 三位八進位制
  • x 加上 兩位十六進位制
  • Unicode碼點

字母

跳脫字元中最基礎的就是：使用反斜槓\加上字母，表示那些無法輸入表示特殊含義的字元，常見的有以下幾種：

  • \b 後退鍵
  • \f 換頁符
  • \n 換行符
  • \r Enter鍵
  • \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中跳脫字元也是較常見的，主要有三種形式的轉義。

最常見的是基於實體名稱：

  • & 後加上實體名稱 再加上分號 ;：
空格  &nbsp;
大於號 > &gt;

實體名稱轉義以前是為了處理html中的特殊的字元顯示問題，比如小於號 <在THML中是作為元素標籤的一部分使用的，作為特殊字元，直接輸入會出錯。

但目前在現代瀏覽器上，已經能正常顯示大於小於號這些符號，可以不使用跳脫字元。

另兩種是基於Unicode碼點：

  • &#x 後加十六進位制碼點 再加上分號 ;：
&#x1f604; => ?
&#x597d; => 好
&#x26; => &
  • &# 後加十進位制的碼點 再加上分號 ;：
&#128516; => ?
&#22909; => 好
&#38; => &

基於實體名稱轉義的字元，也是被包含在Unicode字符集中的，所以也可以使用碼點來進行轉義。
在HTML中最常用到的跳脫字元，可見下面整理的表格：

字元 名稱 名稱轉義 碼點轉義
" 雙引號 &quot; &#34;
& 和號 &amp; &#38;
< 小於號 &lt; &#60;

|大於號|&gt;|&#62;
'|單引號|&apos;|&#39;
空格|空格|&nbsp;|&#160;
©|版權號|&copy;|&#169;
￠|分|&cent;|&#162;
£|鎊|&pound;|&#163;
¥|人名幣|&yen;|&#165;
$|美元|&dollar;|&#36;
©|版權|&copy;|&#169;
®|註冊商標|&reg;|&#174;
×|乘號|&times;|&#215;
÷|除號|&divide;|&#247;

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部分元字元的轉義：

元字元 名稱 轉義符
+ 加號 %2B
空格 空格 %20
/ 斜槓 %2F
? 問號 %3F
# 井號 %23
& 和號 %26
= 等號 %3D
: 冒號 %3A
@ at符 %40
, 逗號 %2C
; 分號 %3B

中文等特殊字元則被轉義成多個組合：

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。

相關文章