Блог

Я пытаюсь оформить выходные данные my console.log() , чтобы выделить ошибки моего приложения.

Пока это работает:

 console.log('%cHello World', 'background: #222; color: #bada55');
  

Но это не:

 var text = "Hello World";
var style = "background: #222; color: #bada55";
console.log('%c', text, style);
  

Он просто возвращается background: #222; color: #bada55 . Чего мне не хватает?

Вы добавляете text первый аргумент после %c использования литералов шаблона

 var text = "Hello World";
var style = "background: #222; color: #bada55";
console.log(`%c${text}`, style);  

Без строк шаблона это будет

 var text = "Hello World";
var style = "background: #222; color: #bada55";
console.log('%c'   text, style);  

Когда вам нужно записать несколько аргументов, вы можете использовать следующий подход:

 const log = (...args) => {
  let messageConfig = '%c%s   ';

  args.forEach((argument) => {
    const type = typeof argument;
    switch (type) {
        case 'bigint':
        case 'number':
        case 'boolean':
            messageConfig  = '%d   ';
            break;

        case 'string':
            messageConfig  = '%s   ';
            break;

        case 'object':
        case 'undefined':
        default:
            messageConfig  = '%o   ';
    }
  });

  console.log(messageConfig, 'color: orange', '[LOGGER]', ...args);
};

log('my message', 123, 'qwerty', { foo: 'bar' }, [1, 2, 3, 4, 5]);
  

вот результат: