JavaScript - 複数行文字列

こんにちは、将来のプログラマーたち！今日は、JavaScriptの素晴らしい世界、複数行文字列について深く掘り下げましょう。プログラミングが初めてであっても心配しないでください。私はこれまでに多くの生徒を指導してきましたので、ステップバイステップで案内します。お気に入りの飲み物を一杯取り、始めましょう！

JavaScript - Multiline Strings

複数行文字列とは？

具体的な方法に進む前に、まず複数行文字列とは何かを理解しましょう。物語を書いているとしますが、読みやすくするために複数行に分けたいと思いませんか？プログラミングでは、複数行文字列を使うことで、コードの複数行にまたがるテキストを書くことができます。

テンプレートリテラルを使用して複数行文字列を作成する

JavaScriptで複数行文字列を作成する最も現代的で優雅な方法は、テンプレートリテラルを使用することです。これらは文字列操作のスイスアーミーナイフのようなものです – 多様で強力です！

シntax

テンプレートリテラルを作成するには、シングルクォートやダブルクォートの代わりにバックティック（`）を使用します。以下のように見えます：

let myStory = `昔々、勇敢なプログラマーが
一晩中コードを書くのが大好きでした。`;

console.log(myStory);

このコードを実行すると以下のように表示されます：

昔々、勇敢なプログラマーが
一晩中コードを書くのが大好きでした。

説明

バックティックの間にあるすべては文字列の一部と見なされます。行ブレークも含まれます。まるで魔法のノートブックで、新しい行を始めるたびに自動的に認識されるようなものです！

テンプレートリテラルの利点

可読性：コードがきれいで理解しやすいです。
フォーマットの保持：行ブレークやインデントが保持されます。
文字列挿入：変数を文字列に簡単に挿入できます（すぐにこれについて説明します）。

高度な例：文字列挿入

少し面白味を加えて、文字列挿入を見てみましょう：

let name = "アリス";
let age = 25;
let profession = "開発者";

let introduction = `こんにちは、私は${name}です。
私は${age}歳で、${profession}として働いています。
複数行文字列を作成することを大好きです！`;

console.log(introduction);

これは以下のように出力されます：

こんにちは、私はアリスです。
私は25歳で、開発者として働いています。
複数行文字列を作成することを大好きです！

この例では、${name}、${age}、${profession}はプレースホルダーで、変数の実際の値に置き換えられます。魔法のようですね？

+演算子を使用して複数行文字列を作成する

テンプレートリテラルが登場する前に、プログラマーはもっと創造的にならなければなりませんでした。一般的な方法の1つは、+演算子を使用して文字列を結合することです。見てみましょう：

let oldSchoolMultiline = "これは1行目です。 " +
"これは2行目です。 " +
"これは3行目です。";

console.log(oldSchoolMultiline);

これは以下のように出力されます：

これは1行目です。 これは2行目です。 これは3行目です。

説明

この方法では、別々の文字列を作成し、+演算子で結合しています。まるで文章を異なるパーツで構築するようなものです。

賛否両論

賛成：

古いバージョンのJavaScriptでも動作します。
行ブレークのコントロールができます。

反対：

長い文字列では読みにくくなります。
フォーマットを保持するのがテンプレートリテラルほど簡単ではありません。

\演算子を使用して複数行文字列を作成する

最後に、エスケープ文字メソッドがあります。これは文字列作成の秘密の道のようなものです – 少し難しいですが、知っておくと役立ちます！

let escapeCharMultiline = "これは1行目です.\n\
これは2行目です.\n\
これは3行目です。";

console.log(escapeCharMultiline);

これは以下のように出力されます：

これは1行目です.
これは2行目です.
これは3行目です。

説明

以下のようなことが起こります：

\nは新しい行を表します。
行末の\はJavaScriptに「この文字列は次の行に続く」と伝えます！

いつ使用するか

この方法は、古いシステムで作業する場合や、行ブレークを非常に具体的にコントロールする必要がある場合に便利ですが、可読性のためにテンプレートリテラルほど好ましくありません。

メソッドの比較

方法を簡単な表にまとめます：

メソッド	シntax	可読性	対応バージョン	使用シーン
テンプレートリテラル	`...`	非常に良い	現代のJS	大抵のシーンで推奨
+演算子	`"..." + "..."`	良い	全バージョン	古いJSでの作業
\演算子	`"...\n\..."`	満遍なく良い	全バージョン	特定のフォーマットが必要な場合

結論

そして、みなさん！JavaScriptの複数行文字列の世界を旅しました。テンプレートリテラルの現代的な優雅さから、結合の古典的な魅力、そしてエスケープ文字の裏道まで、複数行文字列を扱うためのツールキットを満載しています。

覚えておいてください、プログラミングとは適切なツールを選ぶことです。コーディングの旅を進む中で、どの方法を使うべきかが自然と分かるようになります。そして忘れないでください - 練習は完璧の道です！プロジェクトでこれらの方法を試してみて、どれが一番自然に感じるかを見つけてください。

ハッピーコーディング、そしてあなたの文字列が常に完璧にフォーマットされていることを祈っています！?

Credits: Image by storyset