JS--Console オブジェクト

Console オブジェクト

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【コンソールにログを出力する】
Console オブジェクトで用意されているコンソールにログとして文字列を出力するメソッドには次の 4 つがあります。

・書式は

console.log(オブジェクト [, オブジェクト, ...])
console.info(オブジェクト [, オブジェクト, ...])
console.warn(オブジェクト [, オブジェクト, ...])
console.error(オブジェクト [, オブジェクト, ...])

それぞれのメソッドの引数にはコンソールに出力するオブジェクトを指定してください。オブジェクトの値がコンソールに出力されます。複数のオブジェクトを同時に出力する場合はカンマ(,)で区切り続けて記述します。

const msg = 'Hello';

console.log(msg);
 Hello

console.info(msg);
 Hello

console.warn(msg);
 Hello

console.error(msg);
 Hello
【複数のオブジェクトを同時に出力する】
console.log メソッドおよび他の 3 つのメソッドでは、引数にカンマ(,)で区切り複数のオブジェクトを指定することでまとめてコンソールに出力することができます。

・サンプル

const name = '山田';
const old = 18;
const hobby = ['読書', 'ハイキング'];

console.log(name, old, hobby);
 山田 18 (2) ['読書', 'ハイキング']

【文字列の置換を利用したログの出力】
console.log メソッド(および他の 3 種類のメソッド)では次の書式も利用することができます。

console.log(プレースメントを含む文字列 [, 置換するオブジェクト, ...])

1 番目の引数に指定した文字列の中にはプレースメントを必要な数だけ記述します。
2 番目以降の引数で指定されたオブジェクトをプレースメントの先頭から順に置き換えていきます。
置換が終わった文字列をコンソールに出力します。

サンプル

const name = '山田';
const old = 18;

console.log('名前は %s です。年齢は %d です。', name, old);
名前は 山田 です。年齢は 18 です。

1 番目の引数に記述した文字列の中の %s および %d がプレースメントです。 プレースメントが 2 つなので、引数の 2 番目と 3 番目に記述したオブジェクトがプレースメントの位置で置き換わった文字列がコンソールに出力される。

【プレースメントは置き換わるオブジェクトの種類】

%s  文字列
%d  整数
%f  浮動小数点数
%O  オブジェクト
%c  スタイルを設定する

サンプル

const hobby = ['読書', 'ハイキング'];

console.log('趣味は %O です。', hobby);
 趣味は Array(2) です。

【出力されるログにCSSのスタイルを設定する】
ログを出力するときに文字列の置換を利用した書式を利用している場合、出力されるログに対して CSS のスタイルを指定することができます。

1 番目の引数であるプレースメントを含む文字列の中に %c を記述すると、それ以降の文字列に対してスタイルが適用されます。

適用するスタイルは 2 番目以降の引数で文字列として指定します。指定可能なスタイルは color や font 、 background 、 border などが使用できます

サンプル

const name = '山田';
const style = 'color:#ffffff;background-color:#000000;';

console.log('名前は %s です。%cこんにちは。', name, style);
 名前は 山田 です。こんにちは。