
\x與\u相關知識回顧,unicode與正常字元的互相轉換實作,還原chalk處理後的彩色日志方法介紹。
先講一下背景,再說原因
大多數庫都會在日志中使用<code>chalk</code>庫為console的内容進行上色
被<code>chalk</code>處理後,其原本的内容會被‘\x1B...’所包裹
在開發vite-plugin-monitor時,為了擷取原始的日志内容(上色之前),需要将上色後的字元串還原
在使用正則處理内容的時候發現了一個問題
通過<code>.length</code>檢視其長度,結果就如标題所示
反斜杠<code>"\"</code>通常辨別轉義字元,如<code>\n(換行符)</code>,<code>\t(制表符)</code>
而<code>\x</code>就辨別16進制,後面跟上兩位16進制數
與此同時還有<code>\u</code>也是辨別16進制,但其後面需跟上4位16進制數
是以這裡的<code>\x1B</code>實際上就是一個字元
<code>\xhh</code>比對一個以兩位十六進制數(<code>\x00</code>-<code>\xFF</code>)表示的字元
主要用于ASCII碼的表示
<code>\x</code>後必須跟着兩位16進制的字元,否則會報錯,其中 <code>A</code>-<code>F</code> 不區分大小寫
<code>\uhhhh</code>比對一個以四位十六進制數(<code>\u0000</code>-<code>\uFFFF</code>)表示的 Unicode 字元。
在正規表達式中常見于比對中文字元
使用<code>String.prototype.charCodeAt</code>擷取指定位置的 Unicode 碼點(十進制表示)
使用<code>String.prototype.toString</code>将其轉為十六進制字元,轉為16進制字元不會自動補0
通過<code>String.prototype.padStart</code>進行補<code>0</code>
編寫的通用處理方法如下
通過正則<code>/\\u[\da-f]{4}/g</code>比對出所有的unicode字元
使用<code>Number</code>将<code>0x${matchStr}</code>轉換為10進制數
使用<code>String.fromCodePoint</code>将unicode碼點轉為字元
使用<code>String.prototype.replace</code>進行逐字元的轉換
自己從0-1寫一個正則難免會有許多邊界情況考慮不周全,于是在chalk的README中找到了chalk/ansi-regex這個庫
可以将色值相關的 <code>ANSI轉義碼</code> 比對出來
編寫一下處理方法
測試
重拾了一下<code>\x</code>與<code>\u</code>相關的内容,突然額外想到一個點,使用\u去做字元串的加解密(下來再捋一捋)
解決了一個<code>chalk</code>相關的問題“還原終端中的彩色内容”
"你的指尖,擁有改變世界的力量! "
歡迎關注我的個人部落格:https://sugarat.top