node环境实现console输出不同颜色

node环境

---

输出规则分析

1. 输出及打印如下：

console.log('\x1B[31m%s\x1B[0m', '这是红色')
console.log('\x1B[36m%s\x1B[0m', '这是青色')

2. 规则说明

• \x1B[31m 是一个转义序列，它将被您的终端拦截并指示它切换到红色。\x1B是不可打印控制字符 的代码escape。仅处理颜色和样式的转义序列也称为 ANSI转义码 并且是标准化的，因此它们（应该）可以在任何平台上工作。这里可以指定多种样式\x1B[31m\x1B[42m；

• %s 是字符串（第二个参数）被注入的位置；上述代码还可以这样写：

console.log('\x1B[31m这是红色\x1B[0m')
console.log('\x1B[36m这是青色\x1B[0m')

• \x1B[0m表示重置终端颜色，使其在此之后不再继续成为所选颜色；

颜色参考

{
    'bright'    : '\x1B[1m', // 亮色
    'grey'      : '\x1B[2m', // 灰色
    'italic'    : '\x1B[3m', // 斜体
    'underline' : '\x1B[4m', // 下划线
    'reverse'   : '\x1B[7m', // 反向
    'hidden'    : '\x1B[8m', // 隐藏
    'black'     : '\x1B[30m', // 黑色
    'red'       : '\x1B[31m', // 红色
    'green'     : '\x1B[32m', // 绿色
    'yellow'    : '\x1B[33m', // 黄色
    'blue'      : '\x1B[34m', // 蓝色
    'magenta'   : '\x1B[35m', // 品红
    'cyan'      : '\x1B[36m', // 青色
    'white'     : '\x1B[37m', // 白色
    'blackBG'   : '\x1B[40m', // 背景色为黑色
    'redBG'     : '\x1B[41m', // 背景色为红色
    'greenBG'   : '\x1B[42m', // 背景色为绿色
    'yellowBG'  : '\x1B[43m', // 背景色为黄色
    'blueBG'    : '\x1B[44m', // 背景色为蓝色
    'magentaBG' : '\x1B[45m', // 背景色为品红
    'cyanBG'    : '\x1B[46m', // 背景色为青色
    'whiteBG'   : '\x1B[47m' // 背景色为白色
}

colors-console插件下载使用

1. 下载

   npm i colors-console -D
   

2. 使用
3. 颜色参数为字符串时

const colors = require('colors-console')
console.log('颜色是：' + colors('red', '红色'))
console.log('颜色是：', colors('cyan', '青色'))

2. 颜色参数为数组时

console.log(colors(['red','greenBG','underline'], '这是红色、绿色背景、下划线'))

自己实现

代码

/*
 * @description:
 * @fileName: colorLog.js 
 * @author: HanxiaoHui
 * @date: 2023-04-11 09:22:21
 * @version: V1.0.0
*/
colorMap = {
  bright: '1', // 亮色
  grey: '2', // 灰色
  italic: '3', // 斜体
  underline: '4', // 下划线
  reverse: '7', // 反向
  hidden: '8', // 隐藏
  black: '30', // 黑色
  red: '31', // 红色
  green: '32', // 绿色
  yellow: '33', // 黄色
  blue: '34', // 蓝色
  magenta: '35', // 品红
  cyan: '36', // 青色
  white: '37', // 白色
  blackBG: '40', // 背景色为黑色
  redBG: '41', // 背景色为红色
  greenBG: '42', // 背景色为绿色
  yellowBG: '43', // 背景色为黄色
  blueBG: '44', // 背景色为蓝色
  magentaBG: '45', // 背景色为品红
  cyanBG: '46', // 背景色为青色
  whiteBG: '47', // 背景色为白色
  success: '32', // 绿色
  error: '31', // 红色
}
class ColorLog {
  constructor() {
    const _this = this
    const keys = Object.keys(colorMap)
    _this.format = {}
    keys.forEach((item) => {
      // 将文本格式化成对应颜色 方便局部变色/;
       _this.format[item]=function (str){
        return _this.befforeTitle(colorMap[item]) + str + _this.afterTitle()
       }
      //  直接输出全部变色的输出;
      _this[item] = function (str) {
        console.log(
          _this.befforeTitle(colorMap[item]) + str + _this.afterTitle()
        )
      }
    })


  }
  befforeTitle(type = '35') {
    return `\x1B[${type}m`
  }
  afterTitle() {
    return '\x1B[0m'
  }

}
module.exports = ColorLog

使用

// 引入构造函数
const ColorLog = require('./util/colorLog')
// new
const log = new ColorLog()
// 使用
log.red('xxxx') // 整个红色
log.format.red('xxxx')// 返回改变颜色的字符串 可以用于拼接字符串局部颜色；

浏览器环境

在chrome允许你控制日志消息的样式。

console.log('%c this is a message','color:#0f0;')
console.log('%c this %c is a %c message','color:#f00;','font-size:20px;','color:blue;background:yellow;')

第一个参数就是要输出的字符串，通过%c分割的区间与之后的参数一一对应，参数就是标准的css，如果对应的参数不足，无法匹配%c会以字符串的形式输出，参数过多就会直接以字符串形式输出多余的样式。