天天看点

为什么'\x1B'.length===1?\x与\u知识延伸

为什么'\x1B'.length===1?\x与\u知识延伸

\x与\u相关知识回顾,unicode与常规字符的相互转换实现,还原chalk处理后的彩色日志方法介绍。

先讲一下背景,再说原因

大多数库都会在日志中使用<code>chalk</code>库为console的内容进行上色

被<code>chalk</code>处理后,其原本的内容会被‘\x1B...’所包裹

为什么'\x1B'.length===1?\x与\u知识延伸

在开发vite-plugin-monitor时,为了获取原始的日志内容(上色之前),需要将上色后的字符串还原

在使用正则处理内容的时候发现了一个问题

通过<code>.length</code>查看其长度,结果就如标题所示

为什么'\x1B'.length===1?\x与\u知识延伸

反斜杠<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> 匹配出来

编写一下处理方法

测试

为什么'\x1B'.length===1?\x与\u知识延伸

重拾了一下<code>\x</code>与<code>\u</code>相关的内容,突然额外想到一个点,使用\u去做字符串的加解密(下来再捋一捋)

解决了一个<code>chalk</code>相关的问题“还原终端中的彩色内容”

"你的指尖,拥有改变世界的力量! "

欢迎关注我的个人博客:https://sugarat.top

继续阅读