使用多個參數時如何將顏色應用於 console.log？

Question

我正在嘗試設置我的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 background: #222; color: #bada55 。 我錯過了什么？

Answer 1

您使用模板文字在%c之后的第一個參數中添加text

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

Answer 2

當您需要記錄多個參數時，可以使用以下方法：

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

這是結果：