如何在Node和瀏覽器控制臺中打印彩色文字
這篇文章中，我們主要研究的是如何在Node中打印出彩色文字，瀏覽器的只是附帶。
一、常用場景：
1、在Wepack的打包過程中，顯示打包完成后，控制臺輸出了幾行注目的彩色文字信息。
2、在cli工具中，提示的信息有時會附帶紅色或綠色的提示。
二、瀏覽器的彩色console
在瀏覽器中，要打印彩色的log很簡單，如下：
console.log('%c%s', 'color: red; font-size: 20px', 'red')
// %c代表樣式，%s代表字符串
// 樣式設(shè)置后，后面的字符串才能被渲染
那這樣子，我們是不是就可以直接挪到node上了呢？
急沖沖的挪過去一試驗，然而顯示的還是無情的白色文字。
那在Node上要怎么解決這個問題呢？
三、Shell的彩色console
1、c語言與輸出
在講Node的彩色打印前，我們先來溫習(xí)一波c語言吧。
在c語言中，\033是一個轉(zhuǎn)義字符，這里注意033表示的是8進(jìn)制的數(shù)字，表示換碼。
當(dāng)這個字符串輸出時，表示對屏幕的控制。使用時可在后接一個控制字符串。
2、控制字符串組合
所有的控制字符串組合如下：
\33[0m 關(guān)閉所有屬性 \33[1m 設(shè)置高亮度 \33[4m 下劃線 \33[5m 閃爍 \33[7m 反顯 \33[8m 消隱 \33[30~37m 這個區(qū)間都可以設(shè)置字體色 \33[40~47m 這個區(qū)間都可以設(shè)置背景色 \33[90~97m 這個區(qū)間都可以設(shè)置高亮的字體色 \33[100~107m 這個區(qū)間都可以設(shè)置高亮的背景色 \33[nA 光標(biāo)上移n行 \33[nB 光標(biāo)下移n行 \33[nC 光標(biāo)右移n行 \33[nD 光標(biāo)左移n行 \33[y;xH設(shè)置光標(biāo)位置 \33[2J 清屏 \33[K 清除從光標(biāo)到行尾的內(nèi)容 \33[s 保存光標(biāo)位置 \33[u 恢復(fù)光標(biāo)位置 \33[?25l 隱藏光標(biāo) \33[?25h 顯示光標(biāo)
3、使用例子
例1：單字體顏色
#include <stdio.h>
int main(){
char black[]="\033[30m black \033[0m";
char red[]="\033[31m red \033[0m";
char green[]="\033[32m green \033[0m";
char yellow[]="\033[33m yellow \033[0m";
char blue[]="\033[34m blue \033[0m";
char popurse[]="\033[35m popurse \033[0m";
char indigo[]="\033[36m indigo \033[0m";
char white[]="\033[37m white \033[0m";
printf("%s%s%s%s%s%s%s%s", black, red, green, yellow, blue, popurse, indigo, white);
return 0;
}
例2：單背景顏色
#include <stdio.h>
int main(){
char black[]="\033[40m black \033[0m";
char red[]="\033[41m red \033[0m";
char green[]="\033[42m green \033[0m";
char yellow[]="\033[43m yellow \033[0m";
char blue[]="\033[44m blue \033[0m";
char popurse[]="\033[45m popurse \033[0m";
char indigo[]="\033[46m indigo \033[0m";
char white[]="\033[47m white \033[0m";
printf("%s%s%s%s%s%s%s%s", black, darkred, green, yellow, blue, popurse, indigo, white);
return 0;
}
例3：自由組合
#include <stdio.h>
int main(){
char mix[]="\033[31;42m blue font red bg \033[0m";
printf("%s", mix);
return 0;
}
四、Node的彩色打印
Node的實現(xiàn)，是基于c語言的，因此Node的彩色打印其實與c語言類似。
1、console.log的實現(xiàn)
Node中的console.log的底層是process.stdout，而process.stdout的底層又是基于Stream實現(xiàn)的，再進(jìn)一步Stream的底層指向了.cc的c語言文件。到這里，大家也就明白了為什么使用c/c++的性能好了，但是，作為與系統(tǒng)最為接近的高級語言，c的強(qiáng)大和危險是并存的。
2、Node的打印
知道了console.log的實現(xiàn)基礎(chǔ)，我們可以大膽的輸出以下代碼：
var black="\033[30m black \033[0m"; var red="\033[31m red \033[0m"; var green="\033[32m green \033[0m"; var yellow="\033[33m yellow \033[0m"; var blue="\033[34m blue \033[0m"; var popurse="\033[35m popurse \033[0m"; var indigo="\033[36m indigo \033[0m"; var white="\033[37m white \033[0m"; console.log(black, red, green, yellow, blue, popurse, white);
毫無意外，我們打印出了彩色的log。
同樣的，按照c語言的混搭，有：
var mix="\033[37;42m white \033[0m"; console.log(mix);
除了用console.log，我們也可以直接使用process.stdout.write()實現(xiàn)：
var mix="\033[37;42m white \033[0m"; process.stdout.write(mix)
3、chalk的打印
我們知道要如何實現(xiàn)了，但是我們并記不住每個符號怎么辦？
這里已經(jīng)有造好的輪子了：chalk
安裝：npm i chalk
使用：console.log(chalk.red('red'))
是不是很眼熟？你猜的沒錯，chalk.red('red')最終獲得的就是 \033[31m red \033[0m 字符串。
好了，文章到此結(jié)束，希望對正在看的你有幫助~也希望大家多多支持腳本之家。
相關(guān)文章
特別是JavaScript領(lǐng)域中,基于NPM的網(wǎng)絡(luò)傳輸方式真的是越來越流行,包括React與Vue等許多JavaScript庫與框架都選擇使用npm進(jìn)行管理,這里就為大家送上Node.js的npm包管理器基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05
Node+Express連接MySQL實現(xiàn)增刪改查功能
這篇文章主要為大家詳細(xì)介紹了Node如何結(jié)合Express連接MySQL實現(xiàn)增刪改查功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-05-05
本篇文章給大家總結(jié)了node.js博客項目開發(fā)的相關(guān)步驟以及知識點(diǎn)分享，有興趣的朋友參考下。2018-03-03
這篇文章主要介紹了Windows下安裝 node 的版本控制工具 nvm的相關(guān)資料,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了nodejs處理圖片的中間件node-images詳解，非常具有實用價值，需要的朋友可以參考下2017-05-05
前端+nodejs+mysql實現(xiàn)前后端聯(lián)通的完整代碼
Node.js主要屬于后端技術(shù),但也可以用于前端開發(fā)的某些場景,下面這篇文章主要介紹了前端+nodejs+mysql實現(xiàn)前后端聯(lián)通的完整代碼,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
node.js中實現(xiàn)GET和POST請求的代碼示例
在很多場景中,我們的服務(wù)器都需要跟用戶的瀏覽器打交道,如發(fā)送驗證碼、登錄表單提交,請求服務(wù)器數(shù)據(jù)一般都使用GET請求,表單提交到服務(wù)器一般都使用POST請求,本文詳細(xì)介紹了在Node.js中如何處理GET和POST請求,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了詳解如何修改node_modules里的文件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了node Buffer緩存區(qū)常見操作,涉及node.js操作Buffer緩存的創(chuàng)建、寫入、讀取、轉(zhuǎn)換等相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Node.js使用Angular簡單示例，如何在Node.js項目中引入AngularJS，這次提供一個非常簡單的示例，演示AngularJS里的指令、數(shù)據(jù)綁定、服務(wù)等內(nèi)容。感興趣的小伙伴們可以參考一下2018-05-05