console.log 不解析 CSS 样式答案

【问题标题】：console.log not parsing css stylingconsole.log 不解析 CSS 样式
【发布时间】：2017-10-10 18:05:42
【问题描述】：

我想让 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);
}

【问题讨论】：

您的代码生成一个包含 JavaScript 的字符串，而您的 console.log 只是输出该字符串。当您将字符串复制并粘贴到控制台中时，您正在评估它。考虑console.log("%ca", "color: red") 和console.log('"%ca", "color: red"') 之间的区别，或者只是x = 1 + 2 与x = "1 + 2" 之间的区别。
如描述中所述，我是从控制台调用该函数。
@meagar 我认为这可能是问题所在，但我不知道如何解决。

标签： javascript css console.log

【解决方案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"));

请注意，StackOverflow 的人造控制台不支持颜色。上面 sn-p 的实际输出是这样的：

【讨论】：

【解决方案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);

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

【讨论】：