Раскрашенный вывод консоли | Руководства по 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, чтобы улучшить свои навыки.