console.log でデバッグするときの落とし穴とその対処法
JavaScript の console.log() は便利ですが、注意も必要です。
今回は、自分が最近遭遇したコードを元に、具体的な事例を紹介したいと思います。
事例: エスケープ文字に気づかず === で比較
これは実際のコードを単純化したものです。このコードでは、二つの文字列が同じかどうかを比較しています。
if (str1 === str2) {
console.log("同じ文字列です");
} else {
console.log("異なる文字列です");
}
str1 と str2 は外部から渡された string 型の変数です（TypeScriptで開発していたため、型自体は把握していました）。
ログを見ると次のようになっていました。
異なる文字列です
ここで、 str1 と str2 の中身を確認します。
console.log(str1);
console.log(str2);
出力結果は次のようになります。
Hello World
Hello World
わずかな間隔の違いはありますが、すぐに気が付かないかもしれません。
実はそれぞれの変数には、次の文字列が代入されていました。
const str1 = "Hello\tWorld";
const str2 = "Hello World";
この場合、str1 には、タブを意味するエスケープ文字 \t が含まれていますが、str2 では半角スペースが使われています。そのため、=== を使った比較では「異なる文字列です」となっていたのです。
console.log() ではエスケープ文字が表示されないため、出力結果を見比べるだけでは違いがわかりにくい場合があります。
対処法：console.log()とJSON.stringify()を組み合わせて使う
そこで、console.log() と JSON.stringify() を組み合わせて使うことで、エスケープ文字を含む文字列を視覚的に確認できます。
console.log(JSON.stringify(str1));
console.log(JSON.stringify(str2));
出力結果は次のようになります。
"Hello\tWorld"
"Hello World"
JSON.stringify() を使うことで、エスケープ文字も含めて文字列全体が出力されるため、違いを明確に確認することができます。
まとめ
JavaScriptで文字列を出力する際には、エスケープ文字に注意を払うことが重要です。
console.log() と JSON.stringify() を組み合わせて使うことで、エスケープ文字を含む文字列を明確に表示できます。
特に文字列を取り扱うときは気をつけることをオススメします。
（もしかしたらもっと良い方法があるかもしれません。気軽にコメントして頂けると嬉しいです！）
補足（ブログを書いた動機）
例えば Ruby では puts メソッドを使ったときはエスケープ文字が表示されませんが、 p メソッドを使うとエスケープ文字が表示されます。
JavaScript にも p メソッドに相当するようなメソッドがないか調べていますが、今のところ見つけられていません……。
Discussion