【JavaScript】console.logでデバッグ【フォーマット文字列】

スポンサーリンク
アイキャッチ 猫JavaScript
スポンサーリンク

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


今回は、%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内の他の関数の使い方について、ご紹介していきたいと思います。
良ければ次回もご覧ください。

本ブログで一押しのオンラインスクールのご紹介♪




本ブログで一押しのオンラインスクール「Udemy」
筆者も利用しているスクールで、日頃の隙間時間に好きな講座が学べるので大活躍です♪

ジャンルが豊富で学びたい講座がきっとみつかる

AI・データサイエンスなど最先端のIT技術からプレゼンなどビジネススキルに関する講座まで15.5万以上(※海外講座含む)あるため、自分が学びたい講座をみつけることができます

お手頃な価格帯

1講座あたり数千~数万円程度で実践的なスキルアップが可能です。
講座は一度購入すれば視聴期限なく受講でき、30日返金保証もついているので安心して始めることができます。

学びやすい多彩な機能

0.5~2倍の変速機能で自分のペースで受講が可能、専用アプリを使えばスマホからオフライン環境でも視聴が可能です!
また、講師に直接掲示板から質問ができるので疑問を解決し自学自習をサポートしてくれます。

購入前に視聴できますので、是非興味のある方は↓をクリックしてみてください。




JavaScriptプログラミング
スポンサーリンク
nyanblog
タイトルとURLをコピーしました