Dizede yeni bir satır oluşturmadan uzun şablon değişmez satırını çok satırlı olarak sarın

Es6 şablon değişmezlerinde, uzun bir şablon değişmezini dizede yeni bir satır oluşturmadan çok satırlıya nasıl sarabiliriz?

Örneğin, bunu yaparsanız:

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

Daha sonra, dizeye yeni bir çizgi olarak yorumladığı için yeni bir çizgi sembolü oluşturur. Yeni satırı oluşturmadan uzun şablon hazır bilgisini birden çok satıra nasıl sarabiliriz?

Değişmez satırdaki\ satırsonu noktasına bir satır devamı ( ) eklerseniz , çıktıda satırsonu oluşturmaz:

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

Bu eskidir. Ama ortaya çıktı. Editörde boşluk bırakırsanız, onları oraya koyacaktır.

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

sadece normal + sembolünü yapın

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

Satır sonlarını şablon değişmezinizin içinde yiyebilirsiniz.

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

EDIT : Ben bu yardımcı programı ile küçük bir NPM modülü yaptım. Web'de ve Düğümde çalışır ve çok daha sağlam olduğu için aşağıdaki cevabımdaki kod üzerinden tavsiye ederim. Ayrıca, yeni satırları manuel olarak girerseniz sonuçtaki satırsonlarının korunmasına izin verir \nve başka bir şey için şablon değişmez etiketlerini zaten kullandığınızda işlevler sağlar: https://github.com/iansan5653/compress-tag

Burada cevaplamak için geç kaldığımı biliyorum, ancak kabul edilen cevabın satır sonundan sonra girintilere izin vermeme dezavantajı var, bu da sadece yeni satırlardan kaçarak çok hoş görünümlü kod yazamayacağınız anlamına geliyor.

Bunun yerine, neden etiketli şablon değişmez işlevini kullanmıyorsunuz ?

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;
}

Ardından, satır sonları olmasını istediğiniz herhangi bir şablon değişmezini etiketleyebilirsiniz:

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.`;

Bu, gelecekteki bir geliştirici etiketli şablon sözdizimine kullanılmazsa veya açıklayıcı bir işlev adı kullanmazsanız, ancak şimdilik en temiz çözüm gibi geliyorsa, beklenmedik davranışlara sahip olmanın dezavantajı vardır.

Başka bir seçenek kullanmaktır Array.join, şöyle:

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

Eski ve yeniyi kullanın. Şablon değişmez değerleri harikadır, ancak uzun kod değişimlerinden kaçınmak için kompakt kod satırlarına sahip olmak istiyorsanız bunları birleştirin ve ESLint bir karışıklığa neden olmaz.

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

Doug'un cevabına benzer şekilde , bu TSLint yapılandırmam tarafından kabul edildi ve IntelliJ otomatik biçimlendiricim tarafından dokunulmadı:

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

@CodingIntrigue tarafından önerilen çözüm, düğüm 7'de benim için çalışmıyor. İlk satırda bir hat devamını kullanmazsam işe yarar, aksi takdirde başarısız olur.

Bu muhtemelen en iyi çözüm değildir, ancak sorunsuz çalışır:

(`
    border:1px solid blue;
    border-radius:10px;
    padding: 14px 25px;
    text-decoration:none;
    display: inline-block;
    text-align: center;`).replace(/\n/g,'').trim();