JavaScript를 사용하여 콘솔에서 컬러 텍스트를 인쇄하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript를 사용하여 콘솔에서 컬러 텍스트를 인쇄하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-09-24 16:09:05

앞으로

1608명이 탐색했습니다.

如何使用 JavaScript 在控制台中打印彩色文本？

이 기사에서는 JavaScript로 텍스트에 색상을 추가하고 콘솔 창에 인쇄하는 방법을 알아봅니다. 원본 버전에서는 콘솔에 인쇄된 모든 데이터가 검은색이었고 다른 색상은 콘솔에 반영되지 않았지만 여기서는 콘솔 창을 더욱 다채롭게 보이도록 텍스트와 함께 특수 문자를 추가하겠습니다.

콘솔 창의 출력 색상을 변경하는 데 도움이 되는 특수 코드가 있으며, 이러한 코드를 ANSI 이스케이프 코드라고 합니다. console.log() 메서드에 이러한 코드를 추가하면 출력에서 여러 색상을 볼 수 있습니다.

모든 색상에 대한 특수 코드는 다음과 같습니다.

black = "\x1b[30m"
red = "\x1b[31m"
green = "\x1b[32m"
yellow = "\x1b[33m"
blue = "\x1b[34m"
magenta = "\x1b[35m"
cyan = "\x1b[36m"
white = "\x1b[37m"

로그인 후 복사

콘솔 창에 색상 텍스트를 추가하는 작업을 수행하려면 먼저 개체를 만든 다음 색상 이름과 해당 코드가 포함된 키-값 쌍을 추가해야 합니다. 즉, 색상 이름은 키이고 색상은 특정 키에 대한 값인 색상 코드입니다. 키-값 쌍을 추가한 후 for 루프를 사용하여 이러한 키-값 쌍을 인쇄해야 합니다.

Syntax

const color = {};
color.black ="\x1b[30m";
color.red = "\x1b[31m";
color.green = "\x1b[32m";
color.yellow = "\x1b[33m";
color.blue = "\x1b[34m";
color.magenta = "\x1b[35m";
color.cyan = "\x1b[36m";
color.white = "\x1b[37m";
for (var key in color){
   console.log( color[key] + key);
}

로그인 후 복사

Example

Print color text in console

아래 예에서는 콘솔에 컬러 텍스트를 인쇄하고 있습니다. 먼저 콘솔을 열고 "색상 텍스트" 버튼을 클릭하세요.

<!DOCTYPE html>
<html>
<body>
   <center>
   <h1> JavaScript console colored text </h1>
   <p> Please open the <b>Console</b> to see the colored text. </h4>
   <p> Click "Colored Text" to display colored text in the Console.</p>
   <button onclick="colorFunc()">Colored Text</button>
   </center>
   <script>
      function colorFunc() {
         const color = {};

         // Assigning the key: value pair to an object
         color.black = "\x1b[30m";
         color.red = "\x1b[31m";
         color.green = "\x1b[32m";
         color.yellow = "\x1b[33m";
         color.blue = "\x1b[34m";
         color.magenta = "\x1b[35m";
         color.cyan = "\x1b[36m";
         color.white = "\x1b[37m";

         // To print the key-value pairs of the object
         for (var key in color) {
            console.log(color[key] + key);
         }
      }
   </script>
</body>
</html>

로그인 후 복사

여기서 for 루프에서 값을 먼저 인쇄한 다음 키를 인쇄한 것을 볼 수 있습니다. 컬러 텍스트를 인쇄하려면 실제 텍스트 앞에 색상 코드를 입력해야 하기 때문입니다.

NOTE - 텍스트에 대한 색상 코드가 있고 마찬가지로 배경 텍스트에 대한 색상 코드가 있습니다. 콘솔 창에 색상이 있는 배경을 원하는 경우 이를 사용할 수 있습니다. 배경색의 색상 코드는 다음과 같습니다. -

bgBlack = "\x1b[40m"
bgRed = "\x1b[41m"
bgGreen = "\x1b[42m"
bgYellow = "\x1b[43m"
bgBlue = "\x1b[44m"
bgMagenta = "\x1b[45m"
bgCyan = "\x1b[46m"
bgWhite = "\x1b[47m"

로그인 후 복사