javascript - salto - Ajuste la línea literal de la plantilla larga a varias líneas sin crear una nueva línea en la cadena

template string javascript

Question

En los literales de plantilla es6, ¿cómo se puede ajustar un literal de plantilla largo a varias líneas sin crear una nueva línea en la cadena?

Por ejemplo, si haces esto:

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

Luego creará un nuevo símbolo de línea para la cadena, como si se interpretara que tiene una nueva línea. ¿Cómo se puede ajustar la plantilla larga literal a varias líneas sin crear la nueva línea?

Answer 1

Este es uno viejo. Pero surgió. Si deja espacios en el editor, los colocará allí.

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

solo haz el símbolo + normal

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

Answer 2

La solución propuesta por @CodingIntrigue no me funciona en el nodo 7. Bueno, funciona si no uso una continuación de línea en la primera línea, de lo contrario falla.

Probablemente esta no sea la mejor solución, pero funciona sin problemas:

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

Answer 3

Podrías comer los saltos de línea dentro de tu plantilla literal.

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

Answer 4

Si introduce una continuación de línea ( / ) en el punto de la nueva línea en el literal, no creará una nueva línea en la salida:

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

Answer 5

Usa lo viejo y lo nuevo. Los literales de plantilla son geniales, pero si desea evitar largos literales para tener líneas de código compactas, concatenelas y ESLint no causará problemas.

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

Answer 6

EDITAR : He creado un pequeño módulo NPM con esta utilidad. Funciona en la web y en Node y lo recomiendo ampliamente sobre el código en mi respuesta a continuación, ya que es mucho más robusto. También permite preservar nuevas líneas en el resultado si las ingresa manualmente como /n , y proporciona funciones para cuando ya usa etiquetas literales de plantilla para otra cosa: https://github.com/iansan5653/compress-tag

Sé que llego tarde para responder aquí, pero la respuesta aceptada todavía tiene el inconveniente de no permitir sangrías después del salto de línea, lo que significa que aún no puede escribir código de aspecto agradable simplemente escapando de las nuevas líneas.

En cambio, ¿por qué no usar una función literal de plantilla etiquetada ?

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

Luego puede etiquetar cualquier plantilla literal en la que desee tener saltos de línea:

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

Esto tiene el inconveniente de posiblemente tener un comportamiento inesperado si un futuro desarrollador no está acostumbrado a la sintaxis de la plantilla etiquetada o si no usa un nombre descriptivo de la función, pero por ahora parece ser la solución más limpia.