CodePen で出力結果を貼るとき、コンソールの代わりに div に出力したかったので簡易的に実装しました。簡易的なので %d などのフォーマットは利用できません。
See the Pen output for <div> by 七誌 (@7shi) on CodePen.
↑ エラーになる場合は直接開いてください: https://codepen.io/7shi/pen/yLNNJoX
コード
出力関係のコードを JavaScript 側に入れたくなかったので、HTML 側に入れました。
HTML
<!-- CC0 http://creativecommons.org/publicdomain/zero/1.0/ -->
<div id="result"></div>
<script>
function log(...args) {
let str = "";
for (let i = 0; i < args.length; i++) {
if (i > 0) str += " ";
let arg = args[i];
if (typeof arg == "string") str += arg;
else str += JSON.stringify(arg);
}
result.appendChild(document.createTextNode(str));
result.appendChild(document.createElement("br"));
}
</script>
console.log() を置き換えてはいないので、log() として使います。
log("hello");
文字列化
単純に .toString() とするだけでは配列や連想配列がうまく出力されません。
ブラウザのコンソール
> [1,2,[3,4]].toString()
"1,2,3,4"
> ({a:1, b:2}).toString()
"[object Object]"
.toSource() というのを見掛けましたが、残念ながら Firefox の独自仕様でした。
Firefoxのコンソール
> [1,2,[3,4]].toSource()
"[1, 2, [3, 4]]"
> ({a:1, b:2}).toSource()
"({a:1, b:2})"
JSON.stringify() で文字列化するのが手軽で良いようです。
ブラウザのコンソール
JSON.stringify([1,2,[3,4]])
"[1,2,[3,4]]"
JSON.stringify({a:1, b:2})
"{\"a\":1,\"b\":2}"