web-dev-qa-db-fra.com

Enroule une ligne littérale de modèle long sur plusieurs lignes sans créer de nouvelle ligne dans la chaîne

Dans es6 templates literals, comment peut-on envelopper une ligne de modèle longue en multiligne sans créer une nouvelle ligne dans la chaîne?

Par exemple, si vous faites cela:

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

Ensuite, il créera un nouveau symbole de ligne dans la chaîne, interprété comme une nouvelle ligne. Comment encapsuler le littéral de modèle long sur plusieurs lignes sans créer de nouvelle ligne?

javascriptecmascript-6template-literals
80
Ville Miekk-oja

Si vous introduisez une continuation line (\) au point de la nouvelle ligne dans le littéral, cela ne créera pas de nouvelle ligne sur la sortie:

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
119
CodingIntrigue

Ceci est un ancien. Mais c'est arrivé. Si vous laissez des espaces dans l'éditeur, ils seront placés ici. 

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

il suffit de faire le symbole normal +

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

Vous pouvez simplement manger les sauts de ligne à l'intérieur de votre modèle.

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

12
Doug Coburn

Je sais que je suis en retard pour répondre ici, mais la réponse acceptée a toujours l’inconvénient de ne pas autoriser les retraits après le saut de ligne, ce qui signifie que vous ne pouvez toujours pas écrire un très beau code en évitant simplement les retours à la ligne. 

Au lieu de cela, pourquoi ne pas utiliser une fonction littérale de template tagged ?

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

Ensuite, vous pouvez simplement baliser le littéral de modèle dans lequel vous souhaitez insérer des sauts de ligne: 

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

Cela présente l’inconvénient d’avoir un comportement inattendu si un futur développeur n’est pas habitué à la syntaxe du modèle marqué ou si vous n’utilisez pas de nom de fonction descriptif, mais cela semble être la solution la plus propre pour l’instant. 

4
Ian

Utilisez l'ancien et le nouveau. Les littéraux de modèle sont excellents, mais si vous souhaitez éviter les longs littéraux afin d'avoir des lignes de code compactes, concaténez-les et ESLint ne vous causera pas de problèmes.

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

La solution proposée par @CodingIntrigue ne fonctionne pas pour moi sur le noeud 7. Cela fonctionne si je n'utilise pas de continuation de ligne sur la première ligne, sinon elle échoue.

Ce n'est probablement pas la meilleure solution, mais cela fonctionne sans problème:

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