Transformez une longue ligne littérale de modèle en une ligne multiple sans créer de nouvelle ligne dans la chaîne.

Question

Dans les modèles littéraux d'es6, comment peut-on transformer un modèle littéral long en multiligne sans créer une nouvelle ligne dans la chaîne ?

Par exemple, si vous faites ça :

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

Ensuite, il créera un symbole de nouvelle ligne à la chaîne, comme s'il l'interprétait comme une nouvelle ligne. Comment peut-on enrouler le long littéral du modèle sur plusieurs lignes sans créer de nouvelle ligne ?

Answer 1

Si vous introduisez un continuation de la ligne ( \ ) à l'endroit de la nouvelle ligne dans le littéral, il 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

Answer 2

C'est une vieille histoire. Mais il est apparu. Si vous laissez des espaces dans l'éditeur, il les mettra là.

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

faites simplement le symbole + normal

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

Answer 3

Vous pourriez simplement manger les sauts de ligne dans votre modèle littéral.

// 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

EDITAR : J'ai réalisé un tout petit module NPM avec cet utilitaire. Il fonctionne sur le web et dans Node et je le recommande fortement par rapport au code dans ma réponse ci-dessous car il est beaucoup plus robuste. Il permet également de préserver les nouvelles lignes dans le résultat si vous les saisissez manuellement en tant que \n et fournit des fonctions pour les cas où vous utilisez déjà les balises littérales des modèles pour autre chose : https://github.com/iansan5653/compress-tag

---

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 permettre les indentations après le saut de ligne, ce qui signifie que vous ne pouvez toujours pas écrire un code très joli juste en échappant les nouvelles lignes.

Au lieu de cela, pourquoi ne pas utiliser un fonction littérale de modèle balisé ?

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 marquer n'importe quel littéral de modèle dans lequel vous voulez 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.`;

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

Answer 5

Pour info, les suites de lignes sont difficiles à lire et fragiles face aux espaces inattendus, je préfère donc la solution de Monte Jones à celle de Codingintrigue. Pour info, le guide de style de Google recommande la solution Monte Jones et le guide AirBnB recommande il suffit d'utiliser une très longue ligne à la place - c'est-à-dire qu'aucun des deux ne recommande les continuations de ligne. D'ailleurs, je n'ai pas trouvé ce sujet dans une vérification rapide des autres guides de style.