web-dev-qa-db-ja.com

es6改行なしの複数行テンプレート文字列とインデントを許可

最近では、ほとんどの作業でes6をますます使用しています。 1つの注意点はテンプレート文字列です。

行の文字数を80に制限したいので、長い文字列を連結する必要がある場合、連結は次のように複数行になる可能性があるため、うまく機能します。

const insert = 'dog';
const str = 'a really long ' + insert + ' can be a great asset for ' +
  insert + ' when it is a ' + dog;

ただし、テンプレートリテラルを使用してそれを行おうとすると、結果の文字列にdogを配置する$ {insert}を含む複数行の文字列が得られます。 URLアセンブリなどにテンプレートリテラルを使用する場合は理想的ではありません。

行の文字制限を維持し、長いテンプレートリテラルを使用する良い方法をまだ見つけていません。誰かアイデアがありますか？

承認済みとしてマークされている他の質問は、部分的な回答にすぎません。以下は、前に含めるのを忘れていたテンプレートリテラルの別の問題です。

改行文字を使用する際の問題は、最後の文字列にスペースを挿入しないとインデントが許可されないことです。つまり.

const insert = 'dog';
const str = `a really long ${insert} can be a great asset for\
  ${insert} when it is a ${insert}`;

結果の文字列は次のようになります。

a really long dog can be a great asset for  dog when it is a dog

全体的にこれは小さな問題ですが、複数行のインデントを許可する修正があれば興味深いでしょう。

javascriptecmascript-6template-literals
17
Geuis

この問題には2つの答えがありますが、最適と考えられるのは1つだけです。

テンプレートリテラル内では、${}などの式の内部でjavascriptを使用できます。したがって、次のような複数行のテンプレートリテラルをインデントすることができます。警告は、空の文字列や変数など、式に有効なjs文字または値が存在する必要があることです。

const templateLiteral = `abcdefgh${''
  }ijklmnopqrst${''
  }uvwxyz`;

// "abcdefghijklmnopqrstuvwxyz"

このメソッドは、コードをがらくたのように見せます。推奨されません。

2番目の方法は@SzybkiSaszaによって推奨されており、利用可能な最良のオプションのようです。何らかの理由で、テンプレートリテラルを連結することは、可能な限り私には起こりませんでした。私はダープです。

const templateLiteral = `abcdefgh` +
  `ijklmnopqrst` +
  `uvwxyz`;

// "abcdefghijklmnopqrstuvwxyz"
17
Geuis

タグ付きテンプレートリテラル関数 を使用しないのはなぜですか？

function noWhiteSpace(strings, ...placeholders) {
  let withSpace = strings.reduce((result, string, i) => (result + placeholders[i - 1] + string));
  let withoutSpace = withSpace.replace(/$\n^\s*/gm, ' ');
  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.`;

指定された関数は、すべての改行と行送りタブとスペースを削除し、次を生成します。

> 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.
1
Ian