Wie man console.log Farbvariablen mit Nachrichten richtig abstrahiert

Question

Ich möchte meine console.log() Nachricht in eine Variable abstrahieren. Hier ist der Code:

Ich verwende console.log Farbnachrichten.

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

was in

Szenario 1.0: (fett und gelb)

[Hausnummer] + [Richtung] + [Straße] + [Suffix] + Sonstigem (normal und weiß)

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

Das alles funktioniert super. Das Problem ist, dass ich die Nachricht und Farben aus dem console.log() und in einen Variablennamen zu abstrahieren will, so kann ich nur die Variable innerhalb plop, wie diese

console.log(scenario.case1_0) 

Aber die console.log Färbung und Nachrichtenpausen. Es gibt keine richtige Nachricht oder Farbe aus. Wie abstrahiere ich das richtig?

Ansicht JSbin mit Ihrem Browser Konsole öffnen: https://jsbin.com/duxefogufo/1/edit?js,output

Answer 1

Die Farben in das Protokoll übergeben werden müssen zwei getrennte Argumente sein, nicht eine einzelne Saite.

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

Sollte sich:

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

Sie dann kombinieren die die Nachricht und die Farben in einem einzigen Argument Array wie folgt:

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

Verwenden Sie die Funktion anwenden console.log anrufen mit dem Array von Argumenten:

console.log.apply(console, args); 

Es ist wichtig, den Kontext als Konsole anzugeben, sonst wird ein Fehler angezeigt.

Für das zweite Beispiel, in dem Sie Zeichenfolge aus dem Szenario Objekt nehmen, verwenden Sie einfach das Szenario Objekt die verschiedenen Nachrichten zu speichern, aber nicht versuchen, und Saiten Nachricht und Farbe an dieser Stelle verketten:

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

Zugriff Dann die Nachricht aus dem Szenario-Objekt, ein Array für sie erstellen und verketten die Farben Array hinein:

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