console.log
このページでは豊富な例を用いてJavaScript（js）のconsoleオブジェクトのlog()メソッド（console.log）の使い方を学ぶことができます。
JavaScriptのlog()メソッド（console.log）はconsoleオブジェクトのメソッドの1つです。
コードが実行されている環境のコンソールへ引数で指定した値を出力します。
引数には置換文字列といわれる特殊な文字列を使用して、出力結果を操作することもできます。
デバッグなどで変数の値を途中で確認したい場合など、簡易的な値の出力に使用されるケースが多いです。
TL;DR
基本
// 文字列（Stringオブジェクト）の出力
const string1 = 'js';
console.log(string1);
==> js
// 配列（Arrayオブジェクト）の出力
const array1 = [0, 1, 2];
console.log(array1);
==> [ 0, 1, 2 ]
// オブジェクトの出力
const object1 = { name: 'JavaScript', popularity: 1 };
console.log(object1);
==> { name: 'JavaScript', popularity: 1 }
// 複数の値の出力.1
console.log(0, 1, 2, 3, 4, 5);
==> 0 1 2 3 4 5
// 複数の値の出力.2
const string2 = 'js';
const array2 = [true, false];
const object2 = { name: 'Ayano', age: 29 };
console.log(string2, array2, object2);
==> js [ true, false ] { name: 'Ayano', age: 29 }置換文字列の活用
// オブジェクト（JavaScriptオブジェクト全般）の置換文字列.1（%o,%O）
const substitutionString1 = 'A designer, %o';
const object1 = { name: 'Ayano', age: 29 };
console.log(substitutionString1, object1);
==> A designer, { name: 'Ayano', age: 29 }
// オブジェクトの置換文字列.2
const array1 = ['LeftHand', 'RightHand'];
console.log('%o', array1);
==> [ 'LeftHand', 'RightHand', [length]: 2 ]
console.log('%O', array1);
==> [ 'LeftHand', 'RightHand' ]
// オブジェクトの置換文字列.3
console.log('This is %o.', 'JavaScript');
==> This is 'JavaScript'.
// 整数の置換文字列（%i）
console.log('The substituted number is %i', 100);
==> The substituted number is 100
console.log('The substituted number is %i', 3.14);
==> The substituted number is 3
// 浮動小数点数の置換文字列（%f）
console.log('The substituted number is %f', 3.14);
==> The substituted number is 3.14
// 値の文字列を出力する置換文字列（%s）
console.log('%s Kishi', 'Ayano');
==> Ayano Kishi
console.log('She is %s.', { name: 'Ayano', age: 29 });
==> She is { name: 'Ayano', age: 29 }.
// 複数の置換文字列の指定
const substitutionString2 = '%s, %s, %f, %i, %o';
console.log(substitutionString2, 'js', 'javascript', 3.14, 3.14, {});
==> js, javascript, 3.14, 3, {}解説
基本
consoleオブジェクトのlog()メソッドは、コード実行環境のコンソールへ引数で渡した値を出力します。
出力の形式は引数で与えた値によって変化し、文字列やJavaScriptオブジェクトなど様々な形態をとります。
引数は複数指定することもできます。
複数指定する場合は,（カンマ）区切りで引数を指定します。
この場合の出力値はスペースで区切られた形式になります。
// 数値
const number1 = 100;
console.log(number1);
==> 100
// オブジェクト
const object1 = { country: 'JP', code: 81 };
console.log(object1);
==> { country: 'JP', code: 81 }
// 複数値の出力
console.log(['js', 'JavaScript'], {}, 88);
==> [ 'js', 'JavaScript' ] {} 88置換文字列の活用
置換文字列（substitution strings）という特殊な文字列を利用し、文字列のフォーマットをすることもできます。
第1引数に置換文字列が含まれた文字列を指定し、第2引数以降に置換文字列の登場順に置き換えたい値を指定します。 代表的な文字列を以下に列挙しますが、より詳しく仕様を理解したい場合はMDN Web Docsの 文字列置換の使用 を参照してください。
| 置換文字列 | 説明 |
|---|---|
| %s | 文字列 |
| %i | 整数 |
| %f | 浮動小数点数 |
| %o | %O | JavaScriptのオブジェクト全般 |
// オブジェクト（JavaScriptオブジェクト全般）の置換文字列
console.log('The object is %O.', ['js', 100]);
==> The object is [ 'js', 100 ].
console.log('The object is %O.', 'JavaScript');
==> The object is 'JavaScript'.
// 整数の置換文字列
console.log('The integer is %i.', 100);
==> The integer is 100.
// 浮動小数点数の置換文字列
console.log('The float is %f.', 1.4142);
==> The float is 1.4142.
// 値の文字列を出力する置換文字列
console.log('The string is %s.', 'JavaScript');
==> The string is JavaScript.
// 複数の置換文字列の指定
console.log('The args are %s, %i, %o.', 'JavaScript', 1, ['apple']);
==> The args are JavaScript, 1, [ 'apple', [length]: 1 ].