Zawijaj długi wiersz literału szablonu do multilinii bez tworzenia nowego wiersza w ciągu

W literałach szablonów es6, jak można zawinąć długi literał szablonu na multilinię bez tworzenia nowej linii w ciągu?

Na przykład, jeśli to zrobisz:

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

Następnie utworzy nowy symbol linii w łańcuchu, interpretując go jako nową linię. Jak można zawinąć długi literał szablonu na wiele wierszy bez tworzenia nowej linii?

Jeśli wprowadzisz kontynuację linii ( \) w punkcie nowej linii w literale, nie utworzy ona nowej linii na wyjściu:

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

To jest stary. Ale wyszło. Jeśli zostawisz jakieś spacje w edytorze, umieści je tam.

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

po prostu zrób normalny symbol +

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

Możesz po prostu zjeść podziały wierszy wewnątrz swojego szablonu.

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

EDYCJA : stworzyłem mały moduł NPM za pomocą tego narzędzia. Działa w sieci i w Node i bardzo polecam go nad kodem w mojej poniższej odpowiedzi, ponieważ jest znacznie bardziej niezawodny. Pozwala również na zachowanie nowych linii w wyniku, jeśli ręcznie wprowadzisz je jako \n, i zapewnia funkcje, gdy używasz już tagów literału szablonu do czegoś innego: https://github.com/iansan5653/compress-tag

Wiem, że spóźniłem się na odpowiedź, ale zaakceptowana odpowiedź nadal ma tę wadę, że nie zezwala na wcięcia po podziale wiersza, co oznacza, że ​​nadal nie można napisać bardzo ładnie wyglądającego kodu, po prostu unikając nowych linii.

Zamiast tego, dlaczego nie użyć funkcji literału z tagiem szablonu ?

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

Następnie możesz po prostu otagować dowolny literał szablonu, w którym chcesz wprowadzić podziały wierszy:

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

Ma to tę wadę, że może mieć nieoczekiwane zachowanie, jeśli przyszły programista nie jest przyzwyczajony do składni otagowanego szablonu lub jeśli nie używasz opisowej nazwy funkcji, ale wydaje się, że na razie jest to najczystsze rozwiązanie.

Inną opcją jest użycie Array.join, na przykład:

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

Użyj starego i nowego. Literały szablonów są świetne, ale jeśli chcesz uniknąć długich literałów i mieć zwarte wiersze kodu, połącz je, a ESLint nie spowoduje zamieszania.

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

Podobnie jak odpowiedź Douga, jest to akceptowane przez moją konfigurację TSLint i pozostaje nietknięte przez mój autoformatator IntelliJ:

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

Rozwiązanie zaproponowane przez @CodingIntrigue nie działa u mnie w węźle 7. Cóż, działa, jeśli nie używam kontynuacji linii w pierwszej linii, w przeciwnym razie zawodzi.

To chyba nie jest najlepsze rozwiązanie, ale działa bez problemów:

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