溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript中的轉義字符如何使用

發布時間:2023-02-22 17:18:03 來源:億速云 閱讀:164 作者:iii 欄目:開發技術

這篇文章主要介紹“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碼點

    提到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中轉義字符也是較常見的,主要有三種形式的轉義。

    最常見的是基于實體名稱

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

    空格   
    大于號 > &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;版權號&copy;&#169;
    &cent;&#162;
    &pound;&pound;&#163;
    &yen;人名幣&yen;&#165;
    $美元&dollar;&#36;
    &copy;版權&copy;&#169;
    &reg;注冊商標&reg;&#174;
    &times;乘號&times;&#215;
    &divide;除號&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。

    到此,關于“JavaScript中的轉義字符如何使用”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!

    向AI問一下細節

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    AI

    亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女