web-dev-qa-db-ja.com

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

Es6テンプレートリテラルでは、文字列に新しい行を作成せずに、長いテンプレートリテラルを複数行にラップする方法を教えてください。

たとえば、これを行う場合：

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

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

javascriptecmascript-6template-literals
101
Ville Miekk-oja

リテラルの改行の位置に 行継続 （\）を導入すると、出力に改行が作成されません。

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
139
CodingIntrigue

これは古いものです。しかし、それは現れました。エディタ内にスペースを残すと、そこにスペースが挿入されます。

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`;
40
Monte Jones

テンプレートリテラル内で改行を食べることができます。

// 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'));
17
Doug Coburn

EDIT：このユーティリティで小さな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.`;

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

9
Ian

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

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

@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();
0
Danielo515