javascript - How to properly abstract console.log color variables with messages -

i want abstract console.log() message variable. here code:

i utilizing console.log color messages.

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

which results in

scenario 1.0: (in bold , yellow)

[street number] + [direction] + [street name] + [suffix] + else (normal , white)

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] + 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] + else", caseconsolelogcolors     }  // works great   console.log("%c scenario 1.0:" + "%c [street number] + [direction] + [street name] + [suffix] + else", console.colors.bold.yellow, console.colors.white);    // not work     console.log("%c scenario 1.0:" + "%c [street number] + [direction] + [street name] + [suffix] + else", caseconsolelogcolors);    // not work      console.log(scenario.case1);     

this works great. problem want abstract message , colors out of console.log() , variable name, can plop variable inside, this

console.log(scenario.case1_0) 

but console.log coloring , message breaks. not output proper message nor color. how abstract properly?

view jsbin browser console open: https://jsbin.com/duxefogufo/1/edit?js,output

the colours being passed log need 2 separate arguments, not single string.

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

should become:

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

you combine message , colours single argument array follows:

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

use apply function call console.log array of arguments:

console.log.apply(console, args); 

it's important specify context console, otherwise you'll error.

for second example taking strings scenario object, use scenario object store different messages don't try , concatenate strings of message , colour @ point:

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

then access message scenario object, create array , concat colours array it:

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