2016-11-18 4 views
4

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

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

ことをやろうとしている、しかし:私は長い文字列を連結する必要がある場合連結は、このような複数行ことができるので、私は80に私のラインの文字数を制限したい

だから、それが正常に動作しますテンプレートリテラルでは、$ {insert}で結果の文字列にdogを配置した複数行の文字列が得られます。

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

受け入れ済みとマークされているその他の質問は、部分的な回答に過ぎません。以下は、私が以前に忘れてしまったテンプレートリテラルのもう一つの問題です。

改行文字を使用する際の問題は、最後の文字列にスペースを挿入しないで字下げを行うことができないことです。すなわち

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 

全体的に、これはマイナーな問題ですが、複数行のインデントを許可する修正があった場合は興味深いものになるだろう。

+0

@CodingIntrigueこのために重複する疑問符を削除してください。私は、これを行う方法があると判断しました。これは、私の控えめな問題に対処し、それに対する答えを残したいと思っています。基本的に、各行の終わりに$ {1}を使用すると、閉じる前に改行を持つことができ、テンプレートリテラルは改行なしでレンダリングされます。 – Geuis

+0

完了。おそらく、それが適用される場合、あなたはもう一方の質問にあなたの答えを加えることができますか?ソリューションを見ることに興味があります。 – CodingIntrigue

+1

@Geuis私はあなたの痛みを分かち合います。最初はタグ付きテンプレートリテラルの見通しに期待を寄せていましたが、これらのやや明白な問題には組み込みの解決策がないことに気付きました。しかし、テンプレートリテラルはタグを招待し、その効果に使用することができます。[common-tags](https://www.npmjs.com/package/common-tags) - [oneLine](https:// www。 npmjs.com/package/common-tags#oneline)は適切ですか?残念ながら、これにはソースコードのオーサリングの利便性に対処するための実行時関数の実行が含まれます。理想的ではありません:/ – Barney

答えて

7

この問題に対する2つの回答がありますが、1つのみが最適と考えられます。

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

この方法では、コードが駄目に見えるようになります。お勧めしません。

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

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

// "abcdefghijklmnopqrstuvwxyz" 
関連する問題