JavaScriptで文字列を改行する方法
JavaScriptで文字列を改行するには、いくつかの方法があります。このページでは、それぞれの方法について詳しく解説し、コード例も交えて紹介します。
改行コード「\n」を使う
最も基本的な方法は、文字列の中に改行コード「\n」を挿入することです。
<script>
const str = "これは1行目です。\nこれは2行目です。";
console.log(str);
</script>
このコードを実行すると、コンソールに以下のように出力されます。 ``` これは1行目です。 これは2行目です。 ```
テンプレートリテラルを使う
ES6から導入されたテンプレートリテラルを使うと、バッククォート(`)で囲むことで、複数行の文字列をそのまま表現できます。
<script>
const str = `これは1行目です。
これは2行目です。`;
console.log(str);
</script>
このコードの実行結果は、先ほどの「\n」を使った場合と同じになります。
HTMLの<br>タグを使う
文字列をHTMLに表示する場合、HTMLの改行タグである「<br>」を使うこともできます。
<script>
const str = "これは1行目です。<br>これは2行目です。";
document.write(str);
</script>
このコードを実行すると、ブラウザ上に以下のように表示されます。 これは1行目です。 これは2行目です。
それぞれの方法の比較
| 方法 | メリット | デメリット |
|---|---|---|
| 改行コード「\n」 | どの環境でも使える | HTMLに表示する場合は「\n」に変換する必要がある |
| テンプレートリテラル | 複数行の文字列をそのまま記述できる | ES6以降でないと使えない |
| HTMLの「\n」タグ | HTMLにそのまま表示できる | JavaScriptの文字列としては改行されない |
参考資料
よくある質問
Q1: JavaScriptで改行コード「\n」が効かない場合はどうすればよいですか？
A1: 文字列を出力する際に、HTMLの要素として出力している場合は「\n」ではなく「\n」タグを使用する必要があります。
Q2: テンプレートリテラルで変数を埋め込むにはどうすればよいですか？
A2: ${変数名}のように、波括弧の中に変数名を記述することで埋め込むことができます。
Q3: JavaScriptで文字列を結合して改行するにはどうすればよいですか？
A3: 文字列を結合する際に「\n」またはテンプレートリテラルを使って改行を挿入します。
<script>
const str1 = "これは1行目です。";
const str2 = "これは2行目です。";
const combinedStr = `${str1}\n${str2}`;
console.log(combinedStr);
</script>
その他の参考記事:JavaScript文字列