JavaScript で複数行の文字列を書く

1. JavaScript で複数行を連結する
2. \バックスラッシュ文字を使用して、リテラル改行をエスケープする
3. JavaScript でテンプレートリテラルを使って複数行の文字列を作成する

このチュートリアルでは、JavaScript で複数行の文字列を作成する方法を説明します。ES6 以前の時代には、JavaScript で複数行の文字列を直接サポートすることはありませんでした。これを達成するためのいくつかの方法があります。ES6 以前の方法はあまり良くありませんでした。ES6 の方法は構文糖衣の方法です。これらすべての方法を 1つずつ説明します。

JavaScript で複数行を連結する

文字列を複数のサブ文字列に分割してから、+ 記号を使用してそれらを連結し、完全な単一の文字列を取得する場合があります。このようにして、文字列を複数の行に分割し、同時に 1つの文字列にまとめることができます。

const str = 'This is DelftStack' +
    ' We make cool How to Tutorials' +
    ' &' +
    ' Make the life of other developers easier.';

出力：

"This is DelftStack We make cool How to Tutorials & Make the life of other developers easier."

テンプレートリテラルが導入される前は、複数行の文字列を記述する最も簡単で有望な方法でしたが、この方法では、形成された文字列を複数行の文字列として出力できません。これは、すべての行の最後に\n を追加することで実現できます。

\バックスラッシュ文字を使用して、リテラル改行をエスケープする

すべての行の終わりにバックスラッシュを追加して、二重引用符または一重引用符で囲まれた複数行の文字列を作成できます。この文字は、改行文字をエスケープするのに役立ちます。

const str = 'This is DelftStack \
We make cool How to Tutorials \
& \
Make the life of other developers easier.';

出力：

"This is DelftStack We make cool How to Tutorials & Make the life of other developers easier."

そのため、複数行にまたがって文字列を記述しましたが、統合された文字列をまとめました。これにより、目標、正しい表示出力、およびコードの可読性の両方を達成できます。ただし、表示されている場合でも、実際には複数の行に分割されている文字列が必要な場合があります。これは、ES6 のテンプレートリテラルを使用することで実現されます。

JavaScript でテンプレートリテラルを使って複数行の文字列を作成する

テンプレートリテラルは、ES6 によって導入された新しい方法であり、バッククォートを使用して複数行の文字列を作成するのに役立ちます（この文字` はバッククォートと呼ばれます）。複数行の文字列を記述できるだけでなく、以前の方法では不可能だったまったく同じ方法で文字列を出力できるため、これは断然最良のソリューションです。

var str = `This is DelftStack 
We make cool How to Tutorials 
& 
Make the life of other developers easier.
`

出力：

This is DelftStack 
We make cool How to Tutorials 
& 
Make the life of other developers easier.