轉義字元在前端開發中的詳細介紹

来源:https://www.cnblogs.com/jimojianghu/archive/2023/01/28/17054789.html
-Advertisement-
Play Games

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


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

字元串中的轉義

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

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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 本篇我將介紹 Keil C51 和 MDK-ARM 兩大集成開發環境的安裝包下載方法,幫助大家安全快速的從官網下載安裝包。 博主編寫了軟體安裝教程,可以在安裝包下載完成後,跳轉觀看圖文教程進行軟體的安裝與註冊。 待更新 Keil 官網 Keil 官網 >> 點擊跳轉 Keil C51 官網下載 ...
  • 痞子衡單片機排行榜(2022Q4) 繼2020年開辦的《痞子衡嵌入式半月刊》之後,從2023年1月份開始痞子衡將為大家帶來新項目《痞子衡單片機排行榜》(一年分四季,每個季度發佈一期),以MCU主頻和Coremark跑分為基礎(後期會加入更多指標),搜羅國內外8051/ARM/RISC-V等不同賽道的 ...
  • 固件更新 需將小米AX9000路由支持安裝Docker,但正式版並沒有該功能需更新為開發板Rom,直接在小米路由官網下載固件更新即可,當前正式版最新固件為1.0.165,開發板固件為:1.0.140; 固件更新為140開發版本後即可在小米路由管理頁面的高級設置項中看到DOCKER的選項; 安裝Doc ...
  • 一:背景 1. 講故事 大家都知道資料庫應用程式 它天生需要圍繞著數據文件打轉,諸如包含數據的 .mdf,事務日誌的 .ldf,很多時候深入瞭解這兩類文件的合成原理,差不多對資料庫就能理解一半了,關於 .mdf 的合成前面的文章已經有所介紹,這篇我們來聊一下 .ldf 的一些內部知識,比如 LSN。 ...
  • 本文基於此: Flutter中文網 一、安裝和運行Flutter的系統環境要求 想要安裝並運行 Flutter,你的開發環境需要最低滿足以下要求: 操作系統:macOS 磁碟空間:2.8 GB(不包括IDE/tools的磁碟空間)。 工具:Flutter使用git進行安裝和升級。我們建議安裝Xcod ...
  • 主題說明 打開博客園的隨筆詳細頁、標簽頁等,都是整頁重新載入,比較影響體驗。SPA 應用可以減少整頁載入,實現局部刷新,本皮膚通過 Vue3 + TS + Vite 開發的。有些細節待日後逐步完善,隨筆的閱讀和使用基本上沒有問題,文章、日記、部分側邊欄內容還沒有實現。 倉庫地址:GitHub,請點個 ...
  • 值和類型 八種數據類型 undefined、null、boolean、number、string、symbol、bigint、object 原始值和引用值 原始值:按值訪問。值存儲在棧中。變數賦值傳遞時會創建該值的副本,兩個變數(複製與被覆制)完全獨立。 常見原始值類型:undefined、null ...
  • 參考:https://www.cnblogs.com/lxlx1798/articles/16969244.html 要麼使用流讀取器,要麼使用 Reponse 的方法來獲取結果,不能同時使用兩種方法來讀取相同的響應。 直接獲取: Response.blob() 方法返回一個 resolve 返回值 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:在C#中,++i和i++都是自增運算符,其中++i先增加值再返回,而i++先返回值再增加。應用場景根據需求選擇,首碼適合先增後用,尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中,++i 和 i++ 都是自增運算符,但它們在操作上有細微的差異,主要體現在操作的 ...
  • 上次發佈了:Taurus.MVC 性能壓力測試(ap 壓測 和 linux 下wrk 壓測):.NET Core 版本,今天計劃準備壓測一下 .NET 版本,來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能,以便後續持續優化改進。 為了方便對比,本文章的電腦環境和測試思路,儘量和... ...
  • .NET WebAPI作為一種構建RESTful服務的強大工具,為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時,正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性,如[FromRoute]、[FromQuery]和[FromBody],用 ...
  • 原因:我之所以想做這個項目,是因為在之前查找關於C#/WPF相關資料時,我發現講解圖像濾鏡的資源非常稀缺。此外,我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時,會導致CPU的渲染負擔過重。因此,我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • 引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入,上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試,今天用這個示例來演示一下如何用Bogus創建模擬數據 ,和 EFCore 的種子數據生成 Bogus 的優 ...
  • 一、前言 在自己的項目中,涉及到實時心率曲線的繪製,項目上的曲線繪製,一般很難找到能直接用的第三方庫,而且有些還是定製化的功能,所以還是自己繪製比較方便。很多人一聽到自己畫就害怕,感覺很難,今天就分享一個完整的實時心率數據繪製心率曲線圖的例子;之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • 如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式,但發現 App.xaml 中定義的資源沒有被正確載入,那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣,當你創建 Ap ...
  • 一:背景 1. 講故事 上個月有個朋友在微信上找到我,說他們的軟體在客戶那邊隔幾天就要崩潰一次,一直都沒有找到原因,讓我幫忙看下怎麼回事,確實工控類的軟體環境複雜難搞,朋友手上有一個崩潰的dump,剛好丟給我來分析一下。 二:WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 前言 .NET生態中有許多依賴註入容器。在大多數情況下,微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器,使用很方便。 但是筆者在使用中一直有一個頭疼的問題:服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響,但是內置容器支持註冊開放泛型服 ...
  • 一、前言 在項目開發過程中,DataGrid是經常使用到的一個數據展示控制項,而通常表格的最後一列是作為操作列存在,比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中,預設只支持固定左側列,這跟大家習慣性操作列放最後不符,今天就來介紹一種簡單的方式實現固定右側列。(這裡的實現方式參考的大佬 ...