如何在单个console.log()中实现多颜色样式并循环处理多组颜色数组

核心思路 #

针对每组颜色数组，动态生成console.log所需的两个关键部分：

• 消息模板：重复%cABC，数量和数组长度一致，用空格分隔
• 样式参数列表：每个颜色对应一条color: {颜色值}的样式规则

代码实现 #

假设你的多组颜色数组是这样的结构：

const colorGroups = [
  ["#d5dd90","#e6bb45","#ef9770"],
  ["#ff0000", "#00ff00", "#0000ff"],
  ["#888888"]
];

遍历每组数组并输出：

colorGroups.forEach(colors => {
  // 生成消息模板：%cABC 重复对应次数
  const message = colors.map(() => '%cABC').join(' ');
  // 生成样式参数数组
  const styles = colors.map(color => `color: ${color}`);
  // 展开参数调用console.log
  console.log(message, ...styles);
});

补充说明 #

如果需要给ABC添加背景色而非文字颜色，只需把样式里的color改成background，还可以额外加内边距让效果更明显：

const styles = colors.map(color => `background: ${color}; padding: 2px 4px; color: #fff;`);

内容的提问来源于stack exchange，提问作者jared