如何使用消息正确抽象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);

将context指定为console非常重要，否则将出现错误。

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

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);