javascript - support - Las cadenas de plantillas ES6 evitan saltos de línea

template string javascript html

Question

Tengo una cadena larga, que construyo usando cadenas de plantillas ES6, pero quiero que esté sin saltos de línea:

var string = `As all string substitutions in Template Strings are JavaScript
              expressions, we can substitute a lot more than variable names.
              For example, below we can use expression interpolation to 
              embed for some readable inline math:`

console.log(string);

Resultado:

As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:

Mis expectativas:

As all string substitutions in Template Strings are JavaScript expressions, we can substitute a lot more than variable names. For example, below we can use expression interpolation to embed for some readable inline math:

Answer 1

Esto es una locura.

Casi todas las respuestas aquí sugieren la ejecución de una función en tiempo de ejecución para formatear bien el texto mal formateado en tiempo de construcción oO ¿Soy el único sorprendido por este hecho, especialmente el impacto en el rendimiento?

Según lo indicado por @dandavis, la solución oficial , (que por cierto es también la solución histórica para los scripts de shell de Unix), es expandir el retorno de carro, bueno, con el carácter espace: /

`foo /
bar` === ''foo bar''

Simple, performante, oficial, legible y similar a una concha en el proceso

Answer 2

Personalmente prefiero la apariencia de unir una matriz en su lugar:

var string = [
  `As all string substitutions in Template Strings are JavaScript`,
  `expressions, we can substitute a lot more than variable names.`,
  `For example, below we can use expression interpolation to`,
  `embed for some readable inline math:`
].join('' '');

Answer 3

Si tienes ES6, puedes usar etiquetas. Por ejemplo, la etiqueta stripIndent de la biblioteca de etiquetas comunes :

Instalar a través de:

npm install common-tags --save

Requerir a través de:

const stripIndent = require(''common-tags/lib/stripIndent'')

Usar como:

stripIndent`
  As all string substitutions in Template Strings are JavaScript
  expressions, we can substitute a lot more than variable names.
  For example, below we can use expression interpolation to
  embed for some readable inline math:        
`

Edición: Como se mencionó en los comentarios, es probable que deba elegir la const oneLine = require(''common-tags/lib/oneLine'') : const oneLine = require(''common-tags/lib/oneLine'') para obtener el resultado deseado.

Más información en el enlace de etiquetas comunes mencionado anteriormente, así como en este blog

Answer 4

Un salto de línea es un salto de línea ... Si los produce manualmente, me parece muy probable que los obtenga durante el tiempo de ejecución.

Por cierto, encuentro tres soluciones por ahora:

1. Configure su IDE o el editor de código para hacer un ajuste de palabras para que no tenga que agregar saltos de línea en su código si no los necesita: su editor dividirá su código en dos o más líneas si cada oración de código va más allá del máximo configurado caracteres.

2. Elimine los saltos de línea con String.prototype.replace :

var string = `As all string substitutions in Template Strings are JavaScript expressions, we can substitute a lot more than variable names. For example, below we can use expression interpolation to embed for some readable inline math:`.replace(//n/gm,"");

Precaución: aquí está ejecutando una función de tiempo de ejecución para formatear su código de tiempo de construcción , que puede parecer un anti-patrón y tener un impacto en el rendimiento

3. Realice estos saltos de línea de código usando concatenaciones

var string = `As all string substitutions in Template Strings are JavaScript` + `expressions, we can substitute a lot more than variable names.` + `For example, below we can use expression interpolation to` + `embed for some readable inline math:`;

En mi caso, me gustaría ir con la opción # 1.

Answer 5

• Configure IDE para hacer envolturas y use la cadena de plantillas 1-liner, como en su primer fragmento de código.

• O use / escape literal char justo antes de los saltos de línea.

  Ejemplo:

  const string = `1st line/
  2nd line/ 
  3rd line`; 

  Pero no te salvará de problemas con la alineación del espacio.

• Utilice la concatenación ES5 de la vieja escuela con ''+''.

  Ejemplo:

  const string = ''1st line'' + 
                 ''2nd line'' + 
                 ''3rd line''; 

• O use hackear con la plantilla vacía cadena var $ {''''}:

  Ejemplo:

  const string = `1st line${'''' 
                 }2nd line${'''' 
                 }3rd line`;

La 1ª forma es mucho mejor, porque:

• menos simbolos (aspecto del tamaño)
• No hay operaciones en tiempo de ejecución (aspecto de rendimiento)