說起轉(zhuǎn)義字符，大家最先想到的肯定是使用反斜杠，這也是我們最常見的，很多編程語言都支持。

轉(zhuǎn)義字符從字面上講，就是能夠轉(zhuǎn)變字符原本的意義，得到新的字符。常用在特殊字符的顯示以及特定的編碼環(huán)境中。

除了反斜杠以外，在前端開發(fā)中，還有其他幾種轉(zhuǎn)義字符，也是較常見的，本文將對這些做一個總結(jié)。

字符串中的轉(zhuǎn)義

使用反斜杠來表示轉(zhuǎn)義字符時，主要是在字符串中使用。這里就需要了解字符集和編碼等知識，具體可見前文前端開發(fā)中需要搞懂的字符編碼。

字符集就是字符的集合，最常見的 ASCII字符集、Unicode字符集等：

ASCII的任一個字符都可以被轉(zhuǎn)義，使用的就是反斜杠加上數(shù)字編碼，特殊的也能使用反斜杠加上字母。

Unicode，也能進行轉(zhuǎn)義，使用則是反斜杠加上碼點。由于Unicode包含了ASCII的所有字符，且編碼一致，所以都可算編碼轉(zhuǎn)義，而現(xiàn)在前端編程所涉及到的已經(jīng)都是Unicode字符。

一般，反斜杠（\）在字符串中有特殊的含義，用來和后面的字符一起組合表示一些特殊字符，所以又被稱為轉(zhuǎn)義符。

反斜杠后面可以跟著的字符大致有以下幾種：

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

字母

轉(zhuǎn)義字符中最基礎(chǔ)的就是：使用反斜杠\加上字母，表示那些無法輸入表示特殊含義的字符，常見的有以下幾種：

• \b 后退鍵
• \f 換頁符
• \n 換行符
• \r 回車鍵
• \t 制表符
• \v 垂直制表符

以前在字符串拼接時，就經(jīng)常使用\n、\t：

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

需要注意的是，這些字母是特殊的可應用于轉(zhuǎn)義的字母。

如果是非特殊字母，加上反斜杠，則會忽略反斜杠，很多字符也是同樣忽略反斜杠：

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

十六進制數(shù)字

十六進制更常用，它的轉(zhuǎn)義規(guī)則：\x<hex>，\x后跟上2位十六進制數(shù)。

因為只有兩位，范圍是：0x00-0xFF，所以這種方式也只能輸出265種字符，其中：

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

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

八進制數(shù)字

反斜杠后面跟3位八進制數(shù)()，就代表一個轉(zhuǎn)義字符：

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

取值范圍：000-377，總共也是有256種字符，其中就包含了所有的ASCII碼。

八進制和十六進制能轉(zhuǎn)義的字符是一樣的，進行進制轉(zhuǎn)換即可，見前文搞懂JavaScript中的進制與進制轉(zhuǎn)換。

在JS中，用這兩種方式的轉(zhuǎn)義字符是相等的：

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

Unicode碼點

提到Unicode，首先需明確的一點，JS中的字符串是基于Unicode的UTF-16編碼方式。

Unicode字符規(guī)定了碼點和字符平面。

碼點使用從U+0000到U+10FFFF的方位來表示所有的字符。

如果直接使用碼點來轉(zhuǎn)義所有的Unicode字符，則使用規(guī)則：\u{<hex>}，\u后跟上1-6位的十六進制：

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

字符平面又分為基本平面和非基本平面。

其中對于基本平面(65536個字符)的字符，轉(zhuǎn)義規(guī)則：\u<hex>，\u后跟上4位十六進制數(shù)：

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

對于非基本平面的字符，則要使用UTF-16的碼元規(guī)則，一般是兩個碼元：\u<hex>\u<hex>，\u后各4位十六進制：

'\uD83D\uDE04' // '??'
'\uD83C\uDF34' // '??'

只要獲取到字符的Unicode編號碼點，即可以通過這種方式轉(zhuǎn)義所有的字符。

正則表達式中的轉(zhuǎn)義

在正則表達式中有許多特殊的符號，起著不同的作用，但如果要匹配這些特殊符號本身，就需要用到轉(zhuǎn)義了。

這里的轉(zhuǎn)義字符也是使用反斜杠，后面跟上需要匹配的符號，即可，如：\+ 匹配加號。

在正則表達式中，需要反斜杠轉(zhuǎn)義匹配的字符，一共是12個：^ . [ $ ( ) | * + ? { \，這些字符都是正則的特殊字符。

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

上面代碼，$符號加了轉(zhuǎn)義才能匹配成功，否則不匹配。

當使用RegExp方法時，正則參數(shù)是字符串，反斜杠\需要2個，因為字符串內(nèi)會先轉(zhuǎn)義一次：

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

上面代碼中，只有第三行因為使用了兩個反斜杠，才能轉(zhuǎn)義成功，得到正確的值。

HTML中的轉(zhuǎn)義

HTML中轉(zhuǎn)義字符也是較常見的，主要有三種形式的轉(zhuǎn)義。

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

& 后加上實體名稱 再加上分號 ;：

空格   
大于號 > >

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

但目前在現(xiàn)代瀏覽器上，已經(jīng)能正常顯示大于小于號這些符號，可以不使用轉(zhuǎn)義字符。

另兩種是基于Unicode碼點：

&#x 后加十六進制碼點 再加上分號 ;：

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

&# 后加十進制的碼點 再加上分號 ;：

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

基于實體名稱轉(zhuǎn)義的字符，也是被包含在Unicode字符集中的，所以也可以使用碼點來進行轉(zhuǎn)義。

在HTML中最常用到的轉(zhuǎn)義字符，可見下面整理的表格：

URL轉(zhuǎn)義字符

另外，在web開發(fā)中，URL鏈接也是有編碼轉(zhuǎn)義的，特別是針對URL元字符和中文等特殊字符： http://baidu.com/中國 編碼轉(zhuǎn)義為 http%3A%2F%2Fbaidu.com%2F%E4%B8%AD%E5%9B%BD

可以使用encodeURIComponent 和 decodeURIComponent 對URL鏈接進行編解碼處理。

URL中的轉(zhuǎn)義規(guī)則：根據(jù)系統(tǒng)的默認編碼(一般是UTF-8)，是使用百分號(%)加上兩位的十六進制數(shù)。

實際的轉(zhuǎn)義，就是基于Unicode字符的碼點，不過與字符串不太一樣，這里使用的一般是UTF-8編碼方式。

URL部分元字符的轉(zhuǎn)義：

中文等特殊字符則被轉(zhuǎn)義成多個組合：

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

上面代碼中，

就有元字符的轉(zhuǎn)義：':' => %3A、'/' => %2F，

而中文則轉(zhuǎn)義成：中 => %E4%B8%AD、國 => %E5%9B%BD，

表情符號轉(zhuǎn)義成：?? => %F0%9F%98%84。

到此這篇關(guān)于一文帶你搞懂JavaScript中轉(zhuǎn)義字符的使用的文章就介紹到這了,更多相關(guān)JavaScript轉(zhuǎn)義字符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論