這篇文章主要介紹“JavaScript中的轉義字符如何使用”,在日常操作中,相信很多人在JavaScript中的轉義字符如何使用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”JavaScript中的轉義字符如何使用”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
使用反斜杠來表示轉義字符時,主要是在字符串中使用。這里就需要了解字符集和編碼等知識,具體可見前文前端開發中需要搞懂的字符編碼。
字符集就是字符的集合,最常見的 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碼。
八進制和十六進制能轉義的字符是一樣的,進行進制轉換即可,見前文搞懂JavaScript中的進制與進制轉換。
在JS中,用這兩種方式的轉義字符是相等的:
'\xA9' === '\251' // true '\200' === '\x80' // true
提到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中的特殊的字符顯示問題,比如小于號 <
在THML中是作為元素標簽的一部分使用的,作為特殊字符,直接輸入會出錯。
但目前在現代瀏覽器上,已經能正常顯示大于小于號這些符號,可以不使用轉義字符。
另兩種是基于Unicode碼點:
&#x
后加十六進制碼點 再加上分號 ;
:
😄 => ???? 好 => 好 & => &
&#
后加十進制的碼點 再加上分號 ;
:
😄 => ???? 好 => 好 & => &
基于實體名稱轉義的字符,也是被包含在Unicode字符集中的,所以也可以使用碼點來進行轉義。
在HTML中最常用到的轉義字符,可見下面整理的表格:
字符 | 名稱 | 名稱轉義 | 碼點轉義 |
---|---|---|---|
" | 雙引號 | " | " |
& | 和號 | & | & |
< | 小于號 | < | < |
> | 大于號 | > | > |
' | 單引號 | ' | ' |
空格 | 空格 | |   |
© | 版權號 | © | © |
¢ | 分 | ¢ | ¢ |
£ | 鎊 | £ | £ |
¥ | 人名幣 | ¥ | ¥ |
$ | 美元 | $ | $ |
© | 版權 | © | © |
® | 注冊商標 | ® | ® |
× | 乘號 | × | × |
÷ | 除號 | ÷ | ÷ |
另外,在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
。
到此,關于“JavaScript中的轉義字符如何使用”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。