javascript console出力時に文字化けが発生

javascriptで、console出力時に文字化けが発生した場合の原因と解決方法を記述してます。文字コードの指定ができていないため発生します。「meta」タグの属性「charset」に文字コードを指定してあげると解決します。

環境

• OS windows11 pro 64bit
• Apache 2.4.43
• ブラウザ chrome 108.0.5359.72

コード内容

以下の、日本語をコンソールに表示するだけのコードを実行時に発生。

<script>

let x = '漢字'

console.log(`日本語 = ${x}`);

</script>

実行結果

文字コードは「UTF-8」となってます。

firefox（バージョン107）では、以下のエラーとなります。

ドキュメントの文字エンコーディングが宣言されていないため、コンテンツから文字エンコーディングが判別されました。文字エンコーディングは meta タグを使用して Content-Type HTTP ヘッダー内で宣言するか、バイトオーダーマーク (BOM) で指定する必要があります。

画像

safari(15.0)でも文字化けとなります。

原因

ヘッダーの「Content-Type」に、文字コードの指定がないため

解決方法

「content-type」に文字コードの指定がない場合は、「meta」タグの「charset」に文字コードを指定してあげます。

<meta charset="utf-8"/>

実行結果