찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript를 사용하여 콘솔에서 컬러 텍스트를 인쇄하는 방법은 무엇입니까?

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

WBOY
WBOY앞으로
2023-09-24 16:09:051605검색

如何使用 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"

예제

콘솔에서 텍스트 배경색 설정

아래 예제에서는 콘솔에서 텍스트 배경색을 설정합니다. 프로그램을 실행하기 전에 콘솔이 열려 있는지 확인하세요.

rreee

위 내용은 JavaScript를 사용하여 콘솔에서 컬러 텍스트를 인쇄하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript for 循环 console 对象
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：JavaScript에서 주어진 Promise 배열을 지속적으로 실행하는 방법은 무엇입니까?다음 기사：JavaScript에서 주어진 Promise 배열을 지속적으로 실행하는 방법은 무엇입니까?

관련 기사

더보기