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

使用應用函數調用的console.log與一系列參數：

console.log.apply(console, args); 

將上下文指定爲控制檯很重要，否則會出錯。

對於您從腳本對象以字符串的第二個例子，只需使用腳本對象來存儲不同的消息，但不要試圖在這一點上串聯消息和顏色的字符串：

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

然後從腳本對象訪問消息，爲它創建一個數組和Concat的顏色陣列進去：

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