search
LoginSignup
3

More than 1 year has passed since last update.

posted at

updated at

console.logでフォーマット指定子を使う!

console.log()

JavaScriptのconsole.log()でC言語のようなフォーマット指定子が使えることを知ったので、まとめておきます。

(追記:6/23)
console.log()に限らず、consoleオブジェクト全般の使い方について、以下の記事にまとめてみましたので、参考にしてください。
【consoleオブジェクト完全版】ログ出力を極める!

通常

とりあえず通常の書き方
console.log("hoge")
image.png

%s

ただの文字列
いまいち使い道が分かりません
console.log("%s", hoge)
image.png

こっちで十分ですね。
image.png

しいて言うならこれですかね。
image.png
...arryはスプレッド構文という書き方で、配列やオブジェクトを展開してくれます。

%oまたは%O

つまずきがちなObjectの出力
consol.log("%o", hoge)
image.png

これでもできますけどね
image.png

ちなみに%O
いまいち違いが分かりません
image.png

%dまたは%i

お次は整数値です。
console.log("%d", hoge)
image.png

0埋めや半角スペース埋めもできます。
これはChromeやSafariでは使用できませんでした。
下記画像はFirefoxでの検証結果です。
image.png

ちなみに小数を表示しようとすると、小数点以下は切り捨てられます。
入力: 1.1 → 出力: 1
入力: -1.1 → 出力: -2

%f

浮動小数点です。
console.log("%f", hoge)
image.png

小数点以下の桁数指定ができます。
これもChromeやSafariでは使用できなかったので、Firefoxでの検証結果です。
image.png

%c

出力にCSSスタイルを適用できます。
console.log("%cあいうえお", style)
image.png


参考サイト

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3