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"

然后从方案对象访问消息，为它创建一个数组并将colors数组连接到其中：

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

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

1 个答案: