彩色控制台输出 | JavaScript 教程

简介

在本实验中，我们将探索如何使用 JavaScript 中的特殊字符为控制台中的文本输出添加颜色。我们将学习如何使用 colorize 函数为控制台输出应用不同的文本和背景颜色，使其在视觉上更具吸引力且更易于阅读。在本实验结束时，你将能够在你的 JavaScript 应用程序中创建色彩丰富且引人注目的控制台输出。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("Debugging") subgraph Lab Skills javascript/variables -.-> lab-28200{{"使用 JavaScript 实现彩色控制台输出"}} javascript/data_types -.-> lab-28200{{"使用 JavaScript 实现彩色控制台输出"}} javascript/arith_ops -.-> lab-28200{{"使用 JavaScript 实现彩色控制台输出"}} javascript/comp_ops -.-> lab-28200{{"使用 JavaScript 实现彩色控制台输出"}} javascript/loops -.-> lab-28200{{"使用 JavaScript 实现彩色控制台输出"}} javascript/spread_rest -.-> lab-28200{{"使用 JavaScript 实现彩色控制台输出"}} javascript/template_lit -.-> lab-28200{{"使用 JavaScript 实现彩色控制台输出"}} javascript/debugging -.-> lab-28200{{"使用 JavaScript 实现彩色控制台输出"}} end

给文本添加颜色

要在控制台中打印带颜色的文本，请按以下步骤使用 colorize() 函数：

打开终端/SSH 并输入 node 以开始练习编码。
使用模板字面量和特殊字符为字符串输出添加适当的颜色代码。
要添加背景颜色，请在字符串末尾包含一个重置背景颜色的特殊字符。

colorize() 函数创建一个包含 16 个属性的对象，包括黑色、红色、绿色、黄色、蓝色、品红色、青色和白色的颜色代码。此外，它还有用于为文本添加背景颜色的属性。

要使用 colorize() 函数，将你想要添加颜色的文本作为参数调用它，后跟颜色或背景颜色属性。例如，colorize('foo').red 将以红色字母打印 'foo'。

使用 console.log() 函数将带颜色的文本打印到控制台。

const colorize = (...args) => ({
  black: `\x1b[30m${args.join(" ")}`,
  red: `\x1b[31m${args.join(" ")}`,
  green: `\x1b[32m${args.join(" ")}`,
  yellow: `\x1b[33m${args.join(" ")}`,
  blue: `\x1b[34m${args.join(" ")}`,
  magenta: `\x1b[35m${args.join(" ")}`,
  cyan: `\x1b[36m${args.join(" ")}`,
  white: `\x1b[37m${args.join(" ")}`,
  bgBlack: `\x1b[40m${args.join(" ")}\x1b[0m`,
  bgRed: `\x1b[41m${args.join(" ")}\x1b[0m`,
  bgGreen: `\x1b[42m${args.join(" ")}\x1b[0m`,
  bgYellow: `\x1b[43m${args.join(" ")}\x1b[0m`,
  bgBlue: `\x1b[44m${args.join(" ")}\x1b[0m`,
  bgMagenta: `\x1b[45m${args.join(" ")}\x1b[0m`,
  bgCyan: `\x1b[46m${args.join(" ")}\x1b[0m`,
  bgWhite: `\x1b[47m${args.join(" ")}\x1b[0m`
});

console.log(colorize("foo").red); // 'foo' （红色字母）
console.log(colorize("foo", "bar").bgBlue); // 'foo bar' （蓝色背景）
console.log(colorize(colorize("foo").yellow, colorize("foo").green).bgWhite);
// 'foo bar' （第一个单词为黄色字母，第二个单词为绿色字母，两者均为白色背景）

总结

恭喜你！你已经完成了“给文本添加颜色”实验。你可以在 LabEx 中练习更多实验来提升你的技能。