console.log() いろいろ

Vue.jsの勉強をしていた時、何気なく書かれていたconsole.log('new: %s, old: %s',...)という記述を見つけて、**ん？%sって使えるんか？**ってなったので調べてみた。
どうやらconsole.log()には引数として出力する変数を取る書き方がいくつかあるらしい。

基本的な使い方(例)

.js

console.log("hoge");

出力結果

hoge

引数として出力する変数を取る書き方(例)

.js

const str = 'Hello',
    intNum = 19,
    floatNum = 72.5141919,
    obj = {hoge: 'hoge'},
    sty = 'color:#fff;background:#000;';



console.log(str, intNum, floatNum, obj);
console.log('文字列: %s', str);
console.log('数値(整数): %i', intNum);
console.log('数値(整数): %d', intNum);
console.log('数値(浮動小数点): %f', floatNum);
console.log('オブジェクト: %o', obj);
console.log('%c:スタイルを指定して出力', sty);

出力結果

Hello 19 72.5141919 {hoge: "hoge"}
文字列: Hello
数値(整数): 19
数値(整数): 19
数値(浮動小数点数): 72.5141919
オブジェクト: {hoge: "hoge"}
:スタイルを指定して出力 (※実際には黒背景＋白文字になる)