3
votes

Comment aplatir une chaîne de modèle en JavaScript

En Javascript, je souhaite aplatir la chaîne de mon modèle. Donc je veux ceci:

const str = '<label>Thisislabel1</label><button>Thisisbutton1</button>'

Pour me rendre à ceci:

const str = `
    <label>This is label 1</label>
    <button>This is button 1</button>
`

La raison pour laquelle je demande est parce que les espaces ouverts massifs avec `` provoque des erreurs dans les URL de requête GET, par exemple:

const url = '%20%20%20%20%20%20http://0.0.0.0%20%20%20%20%20%20:80/%20%20%20...'

Se transformera en quelque chose de massif comme:

const url = `
    http://0.0.0.0
    :${port}/
    apiCallName?
    var1=${var1}
    var2=${var2}
`

Ce qui rompt l'appel. Je ne veux PAS construire la chaîne en utilisant '+ var1 +' . Je trouve que les chaînes de modèles sont beaucoup mieux lues, donc j'aimerais continuer à les utiliser.

REMARQUE: cela ne devrait pas remplacer tous les espaces. Parce que parfois j'aime écrire de grandes chaînes avec des espaces, comme:

const str = 'my name is frank'

Cela ne devrait pas perdre les espaces, donc PAS ceci:

const str = `
    my name
    is
    frank
`


6 commentaires

Alors ne le divisez pas en plusieurs lignes ...? Ou utilisez .replace ()


La plupart des IDE ont une option comme Word wrap ou quelque chose de similaire pour déplacer automatiquement le code à la ligne suivante sans ajouter d'espaces


Je n'utiliserais pas de littéraux de modèle. Pourquoi pas "mon nom" + "is" + "Frank" où vous pouvez mettre vos sauts de ligne en dehors des littéraux de chaîne?


En outre, vos exemples ont un comportement différent. Le premier a besoin d'un espace entre "is" et "Frank", tandis que le second ne doit pas avoir d'espace entre http://0.0.0.0 et : $ {port} / < / code> ...


Parce que `Je peux utiliser 'ces guillemets' et" ces guillemets "si facilement, tout en ajoutant tout $ {myVar} ou même en faisant un rapide $ {myCounter + 1} ou $ {runThis (). ToLowerCase ()} ` ... et il n'y a pas de + à suivre


@trincot Oui, je suis d'accord que mes exemples ont des comportements différents, mais les deux ont été répondus pour les personnes à la recherche de réponses, alors je pourrais aussi bien laisser les


3 Réponses :


1
votes

Utilisez une expression régulière pour remplacer tous les espaces par la chaîne vide:

const port = 'port';
const var1 = 'var1';
const var2 = 'var2';
const url = `
    http://0.0.0.0
    :${port}/
    apiCall foo bar Name?
    var1=${var1}
    var2=${var2}
`
const finalUrl = url.replace(/\s*\n\s*/g, '');
console.log(finalUrl);

Si le milieu de la chaîne peut contenir des espaces (les URL bien formées ne devraient pas), alors ne faites correspondre que les espaces au début ou à la fin de la ligne:

const port = 'port';
const var1 = 'var1';
const var2 = 'var2';
const url = `
    http://0.0.0.0
    :${port}/
    apiCallName?
    var1=${var1}
    var2=${var2}
`
const finalUrl = url.replace(/\s+/g, '');
console.log(finalUrl);


2 commentaires

Bhahaha J'étais occupé à taper un problème avec les espaces, que vous avez résolu pendant que je le tapais haha. Je vous remercie!


Je donne juste la réponse à Code Maniac parce qu'il / elle a bien expliqué le code. Mais merci pour votre réponse!



2
votes

Vous pouvez utiliser replace et sa fonction de rappel.

const str = `
    my name
    is
    frank
`

const op = str.replace(/([ ]+)|(\n+)/gm,function(match,g1,g2){
  if(g1) return ' '
  else return ''
})

console.log(op.trim())
  • ([] +) - Correspond au caractère espace une ou plusieurs fois. (g1)
  • | - Alternance identique au OU logique.
  • (\ n +) - Correspond au caractère de nouvelle ligne. (g2)

([ ]+)|(\n)


0 commentaires

1
votes

const str = `
        my name
        is
        frank
    `;
    
    console.log(str.replace(/\n+/gi, '').replace(/\s+/gi, ' '));


1 commentaires

Merci pour votre réponse!