複数行文字列
エスケープを使わず、読みやすい複数行のテキストを記述します。
「複数行文字列」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
従来の方法
テンプレートリテラルが登場する前は、複数行の文字列を作るために、改行のエスケープシーケンスを明示するか、行をまたいで文字列を連結する必要がありました。これは冗長で、エラーも起こりやすい方法でした。
const old = "Line 1\nLine 2\nLine 3"
console.log(old)テンプレートリテラルは複数行にまたがる
バッククォートで記述したテンプレートリテラルには、ソースコード内の実際の改行を含められます。入力した改行はすべて、文字列内の改行になります。
実行可能な例では、エスケープシーケンスを使って同じ出力を再現しています。
const text = "First\nSecond\nThird"
console.log(text)空白は保持される
複数行テンプレート内のインデントや空白は、記述したとおり正確に保持されます。これは整形された出力を生成する場合に重要です。
const block = " indented\n more indented"
console.log(block)段落を組み立てる
複数行文字列は、文章の段落、メール本文、テンプレートなどに便利です。ここでは短いメッセージを組み立てます。
const msg = "Dear user,\n\nThank you for joining.\n\nBest regards"
console.log(msg)行数を数える
複数行文字列を改行文字で分割すると、個々の行を数えたり処理したりできます。
const text = "a\nb\nc\nd"
const lines = text.split("\n")
console.log("Lines: " + lines.length)複数行文字列に結合する
行の配列を改行区切りで結合すると、プログラムによって複数行文字列を作成できます。
const parts = ["one", "two", "three"]
console.log(parts.join("\n"))補間と組み合わせる
複数行テンプレートにはプレースホルダーも含められるため、動的な値と改行を組み合わせられます。例では、結果を示すために文字列連結を使っています。
const name = "Sam"
const body = "Hello " + name + ",\nWelcome aboard."
console.log(body)タブと特殊文字
複数行文字列の中でも、タブのエスケープシーケンスを使ってタブ文字を含め、列を揃えることができます。
const table = "Name\tAge\nAlice\t30\nBob\t25"
console.log(table)余分な行を削除する
複数行文字列には、先頭や末尾に空白行が含まれることがあります。trim メソッドを使うと、改行を含む周囲の空白を削除できます。
const raw = "\n\nHello\n\n"
console.log("[" + raw.trim() + "]")コードテキストを生成する
複数行文字列は、ソースコードのスニペットや設定をテキスト出力として生成する場合に便利です。
const code = "function add(a, b) {\n return a + b\n}"
console.log(code)行の長さを意識する
複数行テンプレートには、入力した改行がすべて含まれることを覚えておきましょう。意図しない改行は予期しない空白を生む可能性があるため、意図的に整形してください。
const a = "no break here and here"
console.log(a.length)確認問題
複数行文字列についての理解度を確認してみましょう。
まとめ
まとめ: テンプレートリテラルを使うと、実際の改行を含むテキストを記述できます。
- ソースコード内の改行は文字列内の改行になる
- 空白は記述したとおり正確に保持される
- 補間と組み合わせて動的なブロックを作成できる
- split と join を使って行を処理できる
console.log("Line A\nLine B")よくある質問
「複数行文字列」レッスンは無料ですか？
はい。「複数行文字列」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「複数行文字列」で何を学びますか？
エスケープを使わず、読みやすい複数行のテキストを記述します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「複数行文字列」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。