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

2023-01-28 12:01:53

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

字串中的跳脫

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

字元集就是字元的集合,最常見的 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}' // '