文字列に新しい行を作成せずに長いテンプレートリテラル行を複数行に折り返します


141

es6テンプレートリテラルで、文字列に新しい行を作成せずに長いテンプレートリテラルを複数行にラップするにはどうすればよいですか?

たとえば、次のようにした場合:

const text = `a very long string that just continues
and continues and continues`

次に、新しい行があると解釈して、文字列に新しい行記号を作成します。改行を作成せずに長いテンプレートリテラルを複数の行にラップするにはどうすればよいですか?


2
FWIW行の継続は読みにくく、予期しないスペースに対してもろいので、私はCodi​​ngintrigueよりもMonte Jonesソリューションを好む。FWIWは、Googleのスタイルガイドは推奨していモンテ・ジョーンズ・ソリューションをとAirBnBガイドは推奨していますだけではなく、非常に長いラインを使用して-それはどちらも、されていない行継続を推奨しています。FWIW、他のスタイルガイドの簡単なチェックでは、このトピックを見つけることができませんでした。
トムオニール

回答:


192

リテラルの改行の位置に行継続\)を導入しても、出力に改行は作成されません。

const text = `a very long string that just continues\
and continues and continues`;
console.log(text); // a very long string that just continuesand continues and continues

1
あなたの意味がよくわかりません。REPLの例を提供できますか?
CodingIntrigue 2016年

1
ない簡単に私の場合は、別の変数はCoffeeScriptの設定ファイルから取得されますので、など。ミリメートル...そう動作しますが、何らかの理由で、それはそこに空のスペースを追加しているようだ
ヴィルMiekk-王者

1
最初の行で行継続を使用すると、私には機能しません(ノードv7)
Danielo515

2
これをテストに使用すると、同じ文字列が返されない場合があります。私はちょうどaであるdelineを使用して私の頭痛を解決しました1.1k Airbnb library
iarroyo

44
このソリューションではうまく動作しませんインデントを(開発に共通しているとインデント)。新しい行の\の後の文字は、その行の最初の文字でなければなりません。つまり、and continues...は新しい行の0番目の位置から開始する必要があり、インデントルールに違反しています。
KingJulian 2018

53

これは古いものです。しかし、それは思いついた。エディタにスペースを残すと、そこに配置されます。

if
  const text = `a very long string that just continues\
  and continues and continues`;

通常の+記号を実行するだけです

if
  const text = `a very long string that just continues` +
  `and continues and continues`;

良いですが、これを使用する理由の1つは「+」記号を回避することです。コードが読みにくくなり、操作が面倒になります。
dgo

21

テンプレートリテラル内の改行をそのまま使用できます。

// Thanks to https://twitter.com/awbjs for introducing me to the idea
// here: https://esdiscuss.org/topic/multiline-template-strings-that-don-t-break-indentation

const printLongLine = continues => {
    const text = `a very long string that just ${continues}${''
                 } and ${continues} and ${continues}`;
    return text;
}
console.log(printLongLine('continues'));


3
これは非常に優れたハックですが、prettierIDEでかなりのフォーマッタ(など)を構成している場合は失敗します。prettierこれを1行に戻します。
Rvy Pandey

11

編集:このユーティリティを使用して小さなNPMモジュールを作成しました。これはWebとNodeで動作しますが、はるかに堅牢であるため、以下の回答のコードよりもお勧めします。また、手動でとして入力した場合、結果の改行を保持することもできます。また\n、何かにテンプレートリテラルタグをすでに使用している場合の関数を提供します。https//github.com/iansan5653/compress-tag


私はここで答えるのが遅いことを知っていますが、受け入れられた答えには、改行後にインデントを許可しないという欠点があります。つまり、改行をエスケープするだけでは、見栄えの良いコードを書くことができません。

代わりに、タグ付きテンプレートリテラル関数を使用しないのはなぜですか?

function noWhiteSpace(strings, ...placeholders) {
  // Build the string as normal, combining all the strings and placeholders:
  let withSpace = strings.reduce((result, string, i) => (result + placeholders[i - 1] + string));
  let withoutSpace = withSpace.replace(/\s\s+/g, ' ');
  return withoutSpace;
}

次に、改行を入れたいテンプレートリテラルにタグを付けるだけです。

let myString = noWhiteSpace`This is a really long string, that needs to wrap over
    several lines. With a normal template literal you can't do that, but you can 
    use a template literal tag to allow line breaks and indents.`;

これには、将来の開発者がタグ付きテンプレート構文に慣れていない場合、または説明的な関数名を使用しない場合に予期しない動作が発生する可能性があるという欠点がありますが、現時点では最もクリーンなソリューションのように感じます。


8

別のオプションは次のようにを使用するArray.joinことです:

[
    'This is a very long string. ',
    'It just keeps going ',
    'and going ',
    'and going ',
    'and going ',
    'and going ',
    'and going ',
    'and going',
].join('')

3

古いものと新しいものを使用します。テンプレートリテラルはすばらしいですが、コードの行をコンパクトにするために長いリテラルを避けたい場合は、それらを連結すれば、ESLintは大騒ぎを引き起こしません。

const text = `a very long string that just continues`
  +` and continues and continues`;
console.log(text);

1

Dougの回答と同様に、これは私のTSLint構成で受け入れられ、私のIntelliJ自動フォーマッターには影響を受けません。

const text = `a very long string that just ${
  continues
} and ${continues} and ${continues}`

0

@CodingIntrigueによって提案されたソリューションは、ノード7では機能しません。まあ、最初の行で行継続を使用しない場合は機能しますが、それ以外の場合は失敗します。

これはおそらく最善の解決策ではありませんが、問題なく機能します。

(`
    border:1px solid blue;
    border-radius:10px;
    padding: 14px 25px;
    text-decoration:none;
    display: inline-block;
    text-align: center;`).replace(/\n/g,'').trim();
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.