JavaScriptを使用してコンソールに色付きのテキストを印刷するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScriptを使用してコンソールに色付きのテキストを印刷するにはどうすればよいですか?

WBOY

リリース： 2023-09-24 16:09:05

転載

1564 人が閲覧しました

如何使用 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 ループを使用してこれらのキーと値のペアを出力する必要があります。

構文

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);
}

ログイン後にコピー

例

コンソールに色付きのテキストを印刷する

次の例では、コンソールに色付きのテキストを印刷します。まず コンソール を開いてから、「色付きテキスト」 ボタンをクリックしてください。

<!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 ループで最初に値を出力し、次にキーを出力していることがわかります。これは、色付きのテキストを印刷するには、実際のテキストの前にカラーコードを置く必要があるためです。

注 - テキストのカラーコードがあり、同様に背景テキストのカラーコードもあり、コンソールウィンドウに色付きの背景が必要な場合にそれらを使用できます。背景色のカラーコードは次のとおりです。 -

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

ログイン後にコピー