Раскрашенный вывод консоли с использованием JavaScript

Введение

В этом лабе мы исследуем, как добавить цвет в текстовой вывод консоли с использованием специальных символов в JavaScript. Мы узнаем, как использовать функцию colorize для применения различных цветов текста и фона к нашему консольному выводу, делая его более наглядным и легким для чтения. В конце этого лабы вы сможете создавать яркий и привлекающий внимание консольный вывод в своих JavaScript-приложениях.

Применение цвета к тексту

Для вывода цветного текста в консоль используйте функцию 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, чтобы улучшить свои навыки.