es6テンプレートリテラルで、文字列に新しい行を作成せずに長いテンプレートリテラルを複数行にラップするにはどうすればよいですか?
たとえば、次のようにした場合:
const text = `a very long string that just continues
and continues and continues`
次に、新しい行があると解釈して、文字列に新しい行記号を作成します。改行を作成せずに長いテンプレートリテラルを複数の行にラップするにはどうすればよいですか?
es6テンプレートリテラルで、文字列に新しい行を作成せずに長いテンプレートリテラルを複数行にラップするにはどうすればよいですか?
たとえば、次のようにした場合:
const text = `a very long string that just continues
and continues and continues`
次に、新しい行があると解釈して、文字列に新しい行記号を作成します。改行を作成せずに長いテンプレートリテラルを複数の行にラップするにはどうすればよいですか?
回答:
リテラルの改行の位置に行継続(\
)を導入しても、出力に改行は作成されません。
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
and continues...
は新しい行の0番目の位置から開始する必要があり、インデントルールに違反しています。
これは古いものです。しかし、それは思いついた。エディタにスペースを残すと、そこに配置されます。
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`;
テンプレートリテラル内の改行をそのまま使用できます。
// 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'));
prettier
IDEでかなりのフォーマッタ(など)を構成している場合は失敗します。prettier
これを1行に戻します。
編集:このユーティリティを使用して小さな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.`;
これには、将来の開発者がタグ付きテンプレート構文に慣れていない場合、または説明的な関数名を使用しない場合に予期しない動作が発生する可能性があるという欠点がありますが、現時点では最もクリーンなソリューションのように感じます。
古いものと新しいものを使用します。テンプレートリテラルはすばらしいですが、コードの行をコンパクトにするために長いリテラルを避けたい場合は、それらを連結すれば、ESLintは大騒ぎを引き起こしません。
const text = `a very long string that just continues`
+` and continues and continues`;
console.log(text);