【3分鐘技能get】逼格滿滿的控制檯彩色輸出

學這個能裝逼？

相信大多數前端童鞋，在工程構建或者node服務啓動時，或多或少會在控制檯看到一些彩色輸出，在滿屏黑白中給人眼前一亮的感受~
下面就是一個git提交信息校驗插件的控制檯信息輸出：

通常狀況下，控制檯輸出信息會很是多，想要找到關鍵信息會比較麻煩。能夠看到上例，彩色輸出可以幫助使用者對當前執行進度以及狀態一目瞭然。
若是在構建過程或給本身寫的插件增長格式輸出，是否是很酷~

怎麼實現的呢？

歸功於轉義序列(escape sequences)，終端不只可以輸出黑色，一樣支持輸出帶顏色和格式化的文本。因爲要區分普通輸出內容，所以須要特殊的轉義字符進行標識：「<Esc>[FormatCodem」 ：

• Esc在bash環境，可使用以下方式表示：

//不一樣字符集編碼表現不一樣，這裏展現部分
\033  //Esc的8進製表示
\x1B  //Esc的16進製表示

\e   //Bash提供的插入轉義字符的方便方法,window的shell不支持。

• _FormatCode_表示對文本進行何種格式化的編碼；

Examples：

注意：

1. -e 是echo命令的參數，表示開啓解析轉義序列；
2. \e[0m序列用於刪除設置的全部格式和顏色；能夠理解爲對文本格式處理的結束符，避免影響後面的文本；
3. 上面的例子使用的是Bash環境輸出，其實幾乎全部的編程語言都支持轉義序列。好比文章開頭的例子，使用的即是console.log()方式輸出。

下例中具體格式編碼見參考，使用node環境。

栗子1：改變文本顏色：

console.log('normal \033[34m text \033[0m normal');

\033[34m：表示對接下來的文本進行格式處理；34表示字體使用藍色；
\033[0m：一樣是轉義標識，0標識清除前面設置的格式，不影響後面的輸出。
效果展現：

栗子2：增長背景色：

console.log('normal \033[42m background \033[0m normal');

code爲42對應綠色背景。
效果展現：

栗子3：漸變色的實現

支持256色，此時轉義格式變爲："<Esc>[38;5;ColorNumberm"

let str = '';
for(let i = 16; i < 22; i++) {
    str += '\033[38;5;'+i+'m#\033[0m';
}
for(let i = 21; i > 15; i--) {
    str += '\033[38;5;'+i+'m#\033[0m';
}
console.log(str);

效果展現：

栗子4：組合使用

console.log('\033[1;31;42m Yes it is cool \033[0m \033[4mUnderlined\033[0m');

效果展現：

好了，這些已經知足通常的控制檯裝逼提示需求，不妨嘗試下~

---

更多技術分享及時獲取，歡迎【掃碼關注】~

參考：https://misc.flogisoft.com/ba...