console.log 未解析 css 样式

Question

我想让 console.log 中的文本以一系列彩虹色显示。问题是控制台似乎没有解析样式。相反，当我在控制台中尝试 rainbowify(myString); 时，它输出的是文字字符串。我已经尝试过 toString() 但没有用。

奇怪的是，如果我复制并粘贴输出并将其放入控制台日志（在控制台中），它就可以正常工作。我需要了解为什么它不解析 css 样式，而只是将其作为字符串输出。

var myString = "abcdefghijklmnopqrstuvwxyz";
var rainbow = ["red", "yellow", "pink", "green", "purple", "orange", "blue"];

function rainbowify(string) {
  var splitString = string.split("");
  var stringConCat = "";
  var stringCss = "";
  for (var i = 0, j = 0; i < splitString.length; i++, j++) {
    stringConCat += "\"%c" + splitString[i] + "\"" + " + ";
    stringCss += "\"color : " + rainbow[j] + "\"" + ", ";
    if (j === rainbow.length - 1) {
      j = 0;
    }
  }
  var stringSliced = stringConCat.slice(0, -3);
  var cssSliced = stringCss.slice(0, -2);
  console.log(stringSliced + ", " + cssSliced);
}

Answer 1

您正在生成一个包含一堆 JavaScript 的字符串。当您将该字符串复制并粘贴到您的控制台（不带引号）时，将评估 JavaScript。当您将该字符串直接传递给 console.log 时，将输出字符串本身。

您正在生成这样的字符串：

"\"%ca\" + \"%cb\", \"color : red\", \"color : green\""

当您 console.log 结果时，您使用单个字符串参数调用 log，它记录给定的字符串：

 console.log("\"%ca\" + \"%cb\", \"color : red\", \"color : green\"");

正确的调用将是三个个参数：

 console.log("%ca%cb", "color : red", "color : green")

与其输出包含一堆 + 连接和逗号分隔参数的字符串，不如生成一个参数数组并使用 apply 调用 console.log:

["%ca%cb", "color : red", "color : green"]

var rainbow = ["red", "yellow", "pink", "green", "purple", "orange", "blue"];

function rainbowify(string) {
  var splitString = string.split("");
  var formatString = "";
  var colorArguments = [];

  for (var i = 0; i < splitString.length; ++i) {
    formatString += "%c" + splitString[i];
    colorArguments.push("color : " + rainbow[i % rainbow.length]);
  }

  return [formatString].concat(colorArguments);
}


// output the array
console.log(rainbowify("test string"));

// Invoke console.log with the array as its arguments
console.log.apply(console, rainbowify("test string"));

请注意，Whosebug 的伪控制台不支持颜色。上面片段的实际输出呈现如下：

Answer 2

使用 .reduce() 和 .map() 的函数的简化实现。

var myString = "abcdefghijklmnopqrstuvwxyz";
var rainbow = ["red", "yellow", "pink", "green", "purple", "orange", "blue"];

function rainbowify(string) {
  var strArr = string.split("");
  var logs = [strArr.reduce((result, char) => result.concat("%c" + char + " "), "")];
    
  var logsWithColors = logs.concat(strArr.map((char, i) => {
    return "color: " + rainbow[i % rainbow.length] + ";"
  }));

  console.log.apply(console, logsWithColors);
}

rainbowify(myString);

在浏览器的控制台中生成以下内容：

console.log 未解析 css 样式

console.log not parsing css styling

javascript

css

console.log