web-dev-qa-db-fra.com

es6 chaînes de modèles multilignes sans nouvelles lignes et autoriser les retraits

J'utilise de plus en plus es6 pour la plupart des travaux de nos jours. Une mise en garde concerne les chaînes de modèle.

J'aime limiter mon nombre de caractères de ligne à 80. Donc, si j'ai besoin de concaténer une longue chaîne, cela fonctionne très bien car la concaténation peut être plusieurs lignes comme celle-ci:

const insert = 'dog';
const str = 'a really long ' + insert + ' can be a great asset for ' +
  insert + ' when it is a ' + dog;

Cependant, essayer de le faire avec des littéraux de modèle vous donnerait juste une chaîne multi-lignes avec $ {insert} plaçant dog dans la chaîne résultante. Pas idéal lorsque vous souhaitez utiliser des littéraux de modèle pour des choses comme l'assemblage d'URL, etc.

Je n'ai pas encore trouvé un bon moyen de maintenir ma limite de caractères de ligne et d'utiliser toujours de longs littéraux de modèle. Quelqu'un a des idées?

L'autre question marquée comme acceptée n'est qu'une réponse partielle. Voici un autre problème avec les littéraux de modèle que j'ai oublié d'inclure auparavant.

Le problème avec l'utilisation de nouveaux caractères de ligne est qu'il ne permet pas l'indentation sans insérer d'espaces dans la chaîne finale. c'est à dire.

const insert = 'dog';
const str = `a really long ${insert} can be a great asset for\
  ${insert} when it is a ${insert}`;

La chaîne résultante ressemble à ceci:

a really long dog can be a great asset for  dog when it is a dog

Dans l'ensemble, il s'agit d'un problème mineur, mais il serait intéressant s'il y avait un correctif pour permettre l'indentation multiligne.

javascriptecmascript-6template-literals
17
Geuis

Deux réponses à ce problème, mais une seule peut être considérée comme optimale.

À l'intérieur des littéraux de modèle, javascript peut être utilisé à l'intérieur d'expressions comme ${}. Il est donc possible d'avoir des littéraux de modèle multiligne en retrait tels que les suivants. La mise en garde est qu'un caractère js valide ou une valeur doit être présente dans l'expression, comme une chaîne ou une variable vide.

const templateLiteral = `abcdefgh${''
  }ijklmnopqrst${''
  }uvwxyz`;

// "abcdefghijklmnopqrstuvwxyz"

Cette méthode fait ressembler votre code à de la merde. Non recommandé.

La deuxième méthode a été recommandée par @SzybkiSasza et semble être la meilleure option disponible. Pour une raison quelconque, la concaténation des littéraux de modèle ne m'est pas venue à l'esprit. Je suis derp.

const templateLiteral = `abcdefgh` +
  `ijklmnopqrst` +
  `uvwxyz`;

// "abcdefghijklmnopqrstuvwxyz"
17
Geuis

Pourquoi ne pas utiliser une fonction littérale de modèle balisé ?

function noWhiteSpace(strings, ...placeholders) {
  let withSpace = strings.reduce((result, string, i) => (result + placeholders[i - 1] + string));
  let withoutSpace = withSpace.replace(/$\n^\s*/gm, ' ');
  return withoutSpace;
}

Ensuite, vous pouvez simplement baliser n'importe quel littéral de modèle dans lequel vous souhaitez avoir 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.`;

La fonction fournie supprime tous les sauts de ligne et les tabulations et espaces de début de ligne, ce qui donne:

> 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.
1
Ian