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

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

相關文章