こんにちは。前回はconsole.log関数を使って、基本的なデバッグ方法をご紹介しました。
詳しくは良かったらこちらの記事をご覧ください。

【JavaScript】デバッグ中に値を確認してみよう！【console.log】

プログラム中にデバッグをしていますか？今回は基本的な方法でブラウザでコンソールウィンドウを表示させ、デバッグできる、console.log関数の使い方を説明していきます。特に初心者の方へぜひ見ていただきたいです。デバッグとは、プログラム開発の際に発生したバグ（不具合、誤り）を見つけ、修正する作...

nyanblog2222.com

2020.05.21

今回は、%s, %d, %f, %oなどのフォーマット文字列を使って変数でデバッグをしてみましょう。

%s 文字列を出力

%sを使って、文字列を出力します。
こちらはソースコードの記述例です。

var temp1 = "sample";
var temp2 = "文字列";

console.log("temp1 : %s", temp1)
console.log("temp2 : %s", temp2)

このように%sを設定した箇所に、第2引数で設定した変数の値が出力されています。

temp1 : sample
temp2 : 文字列

%d, %i, %f 数値を出力

%d, %i, %fを使って数値を出力します。
%d, %i : 整数値を出力
%f : 浮動小数点数値を出力
こちらはソースコードの記述例です。

var num1 = 123;
var float1 = 234.56;

var format_d = "%d";
var format_i = "%i";
var format_f = "%f";

// 整数を%d, %iで出力
console.log("%s : %d" + "\r\n%s : %i", format_d, num1, format_i, num1)

// 小数を%d, %iで出力
console.log("%s : %d" + "\r\n%s : %i", format_d, float1, format_i, float1)

// 整数、小数を%f, %fで出力
console.log("%s : %f" + "\r\n%s : %f", format_f, num1, format_f, float1)

コメントにも記載していますが、

1. 整数を%d, %iで表示させた場合
2. 小数を%d, %iで表示させた場合
3. 整数、小数を%fで表示させた場合

のパターンで記述しているのを確認できます。
この実行結果のように、小数の値を%d, %iで出力させると、小数部分が切り捨てされてしまうので、注意しましょう。

// 整数を%d, %iで出力
%d : 123
%i : 123

// 小数を%d, %iで出力
%d : 234
%i : 234

// 整数、小数を%fで出力
%f : 123
%f : 234.56

%o(%O) オブジェクトを出力

%o(%O)を使って、オブジェクトを出力します。
オブジェクトをクリックすることで、詳細情報を確認することができます。
こちらはソースコードの記述例です。

var obj = {
    hoge1: 'value1'
   , hoge2: 'value2'
   , hoge3: 'value3'
   , hoge4: 'value4'
};
console.log("オブジェクト : %O", obj)

var url = "https://nyanblog2222.com/"
console.log("URL : %o", url)

赤枠内のようにオブジェクトの要素を確認したり、URLをクリックして、実際にどこのページへジャンプしたり、確認することができます。

%c コンソールの出力を装飾

%cを使って、%c以降の記述にスタイルを設定することができます。
こちらはソースコードの記述例です。

console.log("ここまでのtextは反映無し %cここからstyleが反映されます。"
    , "padding: 5px; color: #FFF0ED; font-weight: bold; background-color: #47A4A5;");

赤枠内のように、%c以降に設定したスタイルが適用されていることが確認できますね。

まとめ

前回に引き続き、console.log関数の使い方について、ご紹介いたしました。
色々な方法で、変数の中身を確認することができるのですね！
%dや%iでは、桁数を色々変えて実際の値を見てみたり、%cでは、そのスタイルなら適用できるのかを確認したりするのも、面白いと思います！

それでは、本記事をご覧いただき、ありがとうございました。
次回は、console内の他の関数の使い方について、ご紹介していきたいと思います。
良ければ次回もご覧ください。

投稿 【JavaScript】console.logでデバッグ【フォーマット文字列】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。