Enrole a linha literal do modelo longo em várias linhas sem criar uma nova linha na string

Nos literais de modelo es6, como agrupar um literal de modelo longo em várias linhas sem criar uma nova linha na string?

Por exemplo, se você fizer isso:

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

Em seguida, ele criará um novo símbolo de linha para a sequência, como interpretando-a para ter uma nova linha. Como agrupar o modelo longo literal em várias linhas sem criar a nova linha?

Se você introduzir uma continuação de linha ( \) no ponto da nova linha no literal, ela não criará uma nova linha na saída:

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

Este é antigo. Mas surgiu. Se você deixar algum espaço no editor, ele será colocado lá.

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

basta fazer o símbolo + normal

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

Você pode simplesmente comer as quebras de linha dentro do literal do seu modelo.

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

Edição : Eu fiz um pequeno módulo NPM com este utilitário. Ele funciona na web e no Node e eu recomendo o código na minha resposta abaixo, pois é muito mais robusto. Também permite preservar novas linhas no resultado se você as inserir manualmente como \ne fornece funções para quando você já usa tags literais de modelo para outra coisa: https://github.com/iansan5653/compress-tag

Sei que estou atrasado para responder aqui, mas a resposta aceita ainda tem a desvantagem de não permitir recuos após a quebra de linha, o que significa que você ainda não pode escrever um código muito bonito apenas escapando de novas linhas.

Em vez disso, por que não usar uma função literal de modelo marcado ?

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

Em seguida, você pode simplesmente marcar qualquer literal de modelo no qual deseja quebras de linha:

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

Isso tem a desvantagem de ter um comportamento inesperado se um desenvolvedor futuro não estiver acostumado à sintaxe do modelo marcado ou se você não usar um nome de função descritivo, mas parecer a solução mais limpa no momento.

Outra opção é usar Array.join, assim:

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

Use o antigo e o novo. Os literais de modelo são ótimos, mas se você quiser evitar longos literais para ter linhas compactas de código, concatená-los e o ESLint não causará problemas.

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

Semelhante à resposta de Doug, isso é aceito pela minha configuração do TSLint e permanece intocado pelo meu formatador automático IntelliJ:

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

A solução proposta por @CodingIntrigue não está funcionando para mim no nó 7. Bem, funciona se eu não usar uma continuação de linha na primeira linha, caso contrário, falhará.

Esta provavelmente não é a melhor solução, mas funciona sem problemas:

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