web-dev-qa-db-fra.com

Les chaînes de modèles ES6 empêchent les sauts de ligne

J'ai une longue chaîne, que je construis en utilisant des chaînes de modèle ES6, mais je veux qu'elle soit sans saut de ligne:

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

Résultat:

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:

Mes attentes:

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:
javascriptecmascript-6template-strings
46
dim0_0n

C'est insensé.

Presque toutes les réponses suggèrent de lancer une fonction runtime afin de bien formater le temps de construction Texte mal formaté oO Suis-je le seul à être choqué par ce fait, en particulier l'impact sur les performances ???

Comme indiqué par @dandavis, le solution officielle (qui est également la solution historique pour les scripts unix Shell) consiste à espacer le retour chariot, ainsi, avec le caractère espace: \

`foo \
bar` === 'foo bar'

Simple, performant, officiel, lisible et similaire à Shell

53
Cyril CHAPON

Un saut de ligne est un saut de ligne ... Si vous les produisez manuellement, je pense qu'il est très probable que vous les obteniez pendant l'exécution.

BTW, je trouve trois solutions de contournement pour l'instant:

  1. Configurez votre IDE ou votre éditeur de code pour faire le retour à la ligne afin que vous n'ayez pas besoin d'ajouter de sauts de ligne dans votre code si vous n'en avez pas besoin: votre éditeur brisera votre code en deux ou plus lignes si chaque phrase de code dépasse les caractères maximum configurés.

  2. Supprimer les sauts de ligne avec String.prototype.replace:

 var string = `Comme toutes les substitutions de chaînes dans les chaînes de modèle sont des expressions JavaScript 
, nous pouvons substituer bien plus que des noms de variables. 
 Par exemple, nous pouvons utiliser l'interpolation d'expression ci-dessous pour 
 incorporer pour quelques maths en ligne lisibles: `.replace (/\n/gm," ");

Attention: vous exécutez ici une fonction runtime pour formater votre code buildtime, qui peut ressembler à un anti-motif et avoir un impact sur les performances

  1. Effectuez ces sauts de ligne de code à l'aide de concaténations:
 var string = `Comme toutes les substitutions de chaînes dans les chaînes de modèle sont des expressions JavaScript` 
 +`, nous pouvons substituer beaucoup plus que des noms de variables .` 
 + `Par exemple, ci-dessous nous pouvons utiliser l'interpolation d'expression pour `
 +` incorporer pour certains calculs en ligne lisibles: `;

Dans mon cas, j'irais avec l'option n ° 1.

31
Matías Fidemraizer

Si vous avez ES6, vous pouvez utiliser des balises. Par exemple, la balise stripIndent de la bibliothèque de balises communes :

Installer via:

npm install common-tags --save

Requis via:

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

Utilisé comme:

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:        
`

Modifier: Comme indiqué dans les commentaires, vous devez probablement sélectionner la balise: const oneLine = require('common-tags/lib/oneLine') pour obtenir le résultat souhaité.

Plus d'informations sur le lien des balises communes susmentionné ainsi que sur ce blog

19
kvz

Personnellement, je préfère avoir l’air de rejoindre un tableau:

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(' ');
12
jaybee

  • Configurez IDE pour créer des wrappes et utilisez un modèle de chaîne 1-liner, comme dans votre premier extrait de code.

  • Utilisez soit \ Un caractère littéral d'échappement juste avant la fin de la ligne.

    Exemple:

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

    Mais cela ne vous évitera pas les problèmes d'alignement d'espace.

  • Soit vous utilisez la concaténation ES5 de la vieille école avec '+'.

    Exemple:

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

  • Soit utiliser hack avec template chaîne vide var $ {''}:

    Exemple:

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

La 1ère voie est beaucoup mieux, car:

  • moins de symboles (aspect de la taille)
  • pas d'opération d'exécution (aspect de performance)
9
Eugene Mihaylin

Dans ES6, je préfère utiliser une combinaison des deux principales réponses ici (\ En combinaison avec .replace()). L'avantage de combiner la fonction de remplacement avec le caractère d'échappement signifie que vous pouvez garder votre code bloqué de manière cohérente avec le reste de votre code.

/\s{2}/g Est une expression régulière qui sélectionne une instance de deux ou plusieurs espaces consécutifs.

const myMessage = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id urna \
    ligula. Suspendisse lobortis ex ut vestibulum venenatis. Donec imperdiet ante odio, \
    nec malesuada diam tristique eget. Lorem ipsum dolor sit amet, consectetur adipiscing \
    elit. Cras in vulputate tellus.`
  .replace(/\s{2,}/g, "");

Cela génère une chaîne simple et ininterrompue.

"Lorem ipsum dolor sit amet, consectetur elit adipiscing. Duis id urna ligula. Suspendisse lobortis ex ut vestibulum venenatis. Donec imperdiet ante odio, nec malesuada diam tristique egget. Lorem ipsum dolor sit amet, consecetur elit. tellus. "

0
mdawsondev