javascript - 如何使用消息正确抽象 console.log 颜色变量

Question

我想将 console.log() 消息抽象到一个变量中。这是代码:

我正在使用 console.log 颜色消息。

console.log("%c Scenario 1.0:" + "%c [street number] + [direction] + [street name] + [suffix] + anything else", console.colors.bold.yellow, console.colors.white);

结果

场景 1.0:(粗体和黄色)

[街道号码] + [方向] + [街道名称] + [后缀] + 任何其他内容(普通和白色)

console.colors = {
    "gray": "color: #1B2B34;",
    "red": "color: #DB4C4C;",
    "orange": "color: #F99157;",
    "yellow": "color: #BADA55;",
    "green": "color: #99C794;",
    "teal": "color: #5FB3B3;",
    "blue": "color: #6699CC;",
    "purple": "color: #C594C5;",
    "black": "color: #000000;",
    "white": "color: #FFFFFF;",
    "brown": "color: #AB7967;",
}
console.colors.bold = {
    "gray": "font-weight: bold;" + console.colors.gray,
    "red": "font-weight: bold;" + console.colors.red,
    "orange": "font-weight: bold;" + console.colors.orange,
    "yellow": "font-weight: bold;" + console.colors.yellow,
    "green": "font-weight: bold;" + console.colors.green,
    "teal": "font-weight: bold;" + console.colors.teal,
    "blue": "font-weight: bold;" + console.colors.blue,
    "purple": "font-weight: bold;" + console.colors.purple,
    "black": "font-weight: bold;" + console.colors.black,
    "white": "font-weight: bold;" + console.colors.white,
    "brown": "font-weight: bold;" + console.colors.brown
}

  var caseConsoleLogColors = "console.colors.bold.yellow, console.colors.white";
    var scenario = {
        case1_0: "%c Scenario 1.0:" + "%c [street number] + [direction] + [street name] + [suffix] + anything else", caseConsoleLogColors,
        case1_1: "%c Scenario 1.1:" + "%c [street number] + [direction] + [street name]", caseConsoleLogColors,
        case2: "%c Scenario 2:" + "%c [street number] + [street name] + [suffix] - No cardinal direction, 3 items or more", caseConsoleLogColors,
        case3: "%c Scenario 3:" + "%c [street number] + [numeric street name]", caseConsoleLogColors,
        case4_0: "%c Scenario 4.0:" + "%c [street number] + [alphabet street name]", caseConsoleLogColors,
        case4_1: "%c Scenario 4.1 CONFLICT:" + "%c [street name] + [suffix]", caseConsoleLogColors,
        case5: "%c Scenario 5.0:" + "%c [direction] + [numeric street name]", caseConsoleLogColors,
        case6: "%c Scenario 6:" + "%c [direction] + [numeric street name] + [suffix] + anything else", caseConsoleLogColors
    }
 // works great
  console.log("%c Scenario 1.0:" + "%c [street number] + [direction] + [street name] + [suffix] + anything else", console.colors.bold.yellow, console.colors.white);

  // does not work
    console.log("%c Scenario 1.0:" + "%c [street number] + [direction] + [street name] + [suffix] + anything else", caseConsoleLogColors);

  // does not work
     console.log(scenario.case1);    

这一切都很好。问题是我想将消息和颜色从 console.log() 中抽象出来并放入变量名中，这样我就可以将变量放入其中，如下所示

console.log(scenario.case1_0)

但是 console.log 着色和消息中断。它不会输出正确的消息或颜色。我如何正确地抽象它？

在浏览器控制台打开的情况下查看 JSbin: https://jsbin.com/duxefogufo/1/edit?js,output

Answer 1

传递给日志的颜色需要是两个单独的参数，而不是单个字符串。

var caseConsoleLogColors = "console.colors.bold.yellow, console.colors.white";

应该变成:

var caseConsoleLogColors = [console.colors.bold.yellow, console.colors.white];

然后，您可以将消息和颜色组合到单个参数数组中，如下所示:

var message = ["%c Scenario 1.0:" + "%c [street number] + [direction] + [street name] + [suffix] + anything else"]  
var args = message.concat(caseConsoleLogColors);

使用 apply 函数使用参数数组调用 console.log:

console.log.apply(console, args);

将上下文指定为控制台非常重要，否则您会收到错误。

对于从场景对象中获取字符串的第二个示例，只需使用场景对象来存储不同的消息，但此时不要尝试连接消息和颜色的字符串:

var scenario = {
    case1: "%c Scenario 1.0:" + "%c [street number] + [direction] + [street name] + [suffix] + anything else"

然后从场景对象访问消息，为其创建一个数组并将颜色数组连接到其中:

var message = [scenario.case1]
var args = message.concat(caseConsoleLogColors);
console.log.apply(console, args);