Comment briser une chaîne sur plusieurs lignes de code en JavaScript?

198

Existe-t-il un caractère en JavaScript pour décomposer une ligne de code afin qu'elle soit lue comme continue malgré qu'elle se trouve sur une nouvelle ligne?

Quelque chose comme....

1. alert ("Veuillez sélectionner un fichier   
2. \ supprimer ");
TTT
la source

Réponses:

272

Dans votre exemple, vous pouvez diviser la chaîne en deux parties:

alert ( "Please Select file"
 + " to delete");

Ou, quand c'est une chaîne, comme dans votre cas, vous pouvez utiliser une barre oblique inverse comme l'a suggéré @Gumbo:

alert ( "Please Select file\
 to delete");

Notez que cette approche de barre oblique inverse n'est pas nécessairement préférée , et peut-être pas universellement prise en charge (j'ai eu du mal à trouver des données matérielles à ce sujet). Ce n'est pas dans la spécification ECMA 5.1 .

Lorsque vous travaillez avec un autre code (pas entre guillemets), les sauts de ligne sont ignorés et parfaitement acceptables. Par exemple:

if(SuperLongConditionWhyIsThisSoLong
  && SuperLongConditionOnAnotherLine
  && SuperLongConditionOnThirdLineSheesh)
{
    // launch_missiles();
}
Michael Haren
la source
Pouvez-vous briser une instruction if?
TTT
17
Mais méfiez-vous du mécanisme d'insertion automatique des points-virgules: essayez d'avoir un retour sur une ligne et une "chaîne" sur la suivante à la fin de la fonction et vous obtenez undefined en conséquence.
du
Est-ce conforme aux normes? Tous les navigateurs compatibles le prendront-ils en charge? Les anciens navigateurs le prennent-ils en charge aujourd'hui? Aucune de ces questions importantes n'a été abordée, -1.
ulidtko
3
Eh bien ... si vous allez poser un tas de nouvelles questions pas encore posées, vous devez nous donner une chance d'y répondre. J'ai mis à jour ma réponse avec une conjecture insatisfaisante.
Michael Haren
2
Méfiez-vous des contre-obliques. Il mangera tous les blancs jusqu'à ce qu'il trouve un blanc. Ainsi, l'exemple "alerte": veuillez sélectionner le fichier à supprimer. Si vous voulez l'espace blanc entre le fichier et le, vous devez le mettre avant la barre oblique inverse.
jgomo3
41

Mettez la barre oblique inverse à la fin de la ligne:

alert("Please Select file\
 to delete");

Modifier     Je dois noter que cela ne fait pas partie des chaînes ECMAScript car les caractères de fin de ligne ne sont pas autorisés du tout:

Un caractère ' LineTerminator ' ne peut pas apparaître dans un littéral de chaîne, même s'il est précédé d'une barre oblique inverse \. La bonne façon de faire en sorte qu'un caractère de terminaison de ligne fasse partie de la valeur de chaîne d'un littéral de chaîne consiste à utiliser une séquence d'échappement telle que \nou \u000A.

L'utilisation de la concaténation de chaînes est donc le meilleur choix.


Update 2015-01-05     Les littéraux de chaîne dans ECMAScript5 autorisent la syntaxe mentionnée:

Un caractère de terminaison de ligne ne peut pas apparaître dans un littéral de chaîne, sauf dans le cadre d'un LineContinuation pour produire la séquence de caractères vide. La bonne façon de faire en sorte qu'un caractère de terminaison de ligne fasse partie de la valeur String d'un littéral de chaîne consiste à utiliser une séquence d'échappement telle que \nou \u000A.

Gombo
la source
1
ECMAScript5 le permet: " Un caractère de terminaison de ligne ne peut pas apparaître dans un littéral de chaîne, sauf dans le cadre d'une LineContinuation pour produire la séquence de caractères vide. La bonne façon de faire en sorte qu'un caractère de terminaison de ligne fasse partie de la valeur de chaîne d'un littéral de chaîne est d'utiliser une séquence d'échappement telle que \nor \u000A. "
Oriol
1
@Oriol Merci pour la note, mis à jour la réponse en conséquence!
Gumbo
1
Est-ce problématique si le fichier a été créé sous Windows. En d'autres termes, les lignes se terminant par \r\nau lieu de \n?
Adam Plocher
31

ECMAScript 6 introduit des chaînes de modèle :

Les chaînes de modèle sont des littéraux de chaîne permettant des expressions incorporées. Vous pouvez utiliser des chaînes multi-lignes et des fonctions d'interpolation de chaînes avec elles.

Par exemple,

alert(`Please Select file   
to delete`);

alertera

Please Select file   
to delete
Oriol
la source
1
Wow génial. Pour les obtenir `` sur le clavier, appuyez deux fois sur SHIFT + ´. Sur un clavier allemand, cette touche est proche de la touche de retour arrière.
Nadu
@Nadu Cela dépend d'un clavier. Le mien a une `clé. Puisqu'il s'agit d'un modificateur, il n'est pas écrit directement. C'est probablement la raison pour laquelle vous pensiez que vous devriez appuyer deux fois, mais cela en écrira deux. Appuyez sur la barre d'espace pour n'en écrire qu'une seule.
Oriol
Incroyable qu'il ait fallu si longtemps pour autoriser les chaînes multilignes sans hacks fantaisistes ... La question est: Qu'est-ce qui sera utilisé comme séparateurs de ligne - un ou des caractères codés en dur ou les caractères de saut de ligne du document?
StanE
1
Il y a un problème avec `` au cas où vous voudriez agrandir le fichier * .js.
Raskolnikov
1
Considérez que, toujours en mars 2018, seulement 89% des navigateurs utilisés dans le monde prennent en charge les chaînes de modèles selon caniuse.com caniuse.com/#feat=template-literals
FFirmenich
7

Brisez la chaîne en deux morceaux 

alert ("Please select file " +
       "to delete");
Jason Punyon
la source
9
Mais n'oubliez pas d'avoir un espace à la fin du premier ou au début du deuxième morceau;)
Majid Fouladpour
4

Intéressant à noter. A essayé:

alert("Some \
    string \
    wrapped \
    across \
    mutliples lines.")

Et cela a fonctionné. Cependant, en cas d'accident !, un caractère espace suivait la dernière barre oblique inverse (toutes les autres barres obliques inversées étaient en fin de ligne). Et cela a provoqué une erreur dans le javascript! La suppression de cet espace a cependant corrigé l'erreur.

C'est dans ADT pour Android en utilisant Cordova.


la source
1
J'ai passé la majeure partie de ma journée à lutter contre ce problème et j'ai également découvert, grâce à vous, qu'un caractère spatial après l'une des barres obliques empêchait mon application ionique de se compiler. Je vous remercie!
rekordboy
1
Je ne peux pas croire que quelqu'un ait commenté que cela inclura l'indentation dans le code dans le cadre de la chaîne, de sorte que l'exemple devientSome\n<4 spaces>string\n<4 spaces>wrapped\n<4 spaces>across\n<4 spaces>multiple lines.
JHH
1

Vous pouvez simplement utiliser

1:  alert("Please select file" +
2:        " to delete");

Cela devrait fonctionner

Jaime Garcia
la source
0

Vous pouvez diviser une constante de chaîne longue en morceaux logiques et les affecter dans un tableau. Faites ensuite un joinavec une chaîne vide comme délimiteur.

var stringArray = [
  '1. This is first part....',
  '2. This is second part.....',
  '3. Finishing here.'
];

var bigLongString = stringArray.join('');
console.log(bigLongString);

La sortie sera:

  1. Ceci est la première partie ... 2. Ceci est la deuxième partie ..... 3. Finir ici.

Il y a de légères performances de cette façon, mais vous gagnez en lisibilité et en maintenabilité du code.

blackcatweb
la source
0

Une bonne solution ici pour les utilisateurs de VSCode , si une chaîne se décomposant en plusieurs lignes provoque le problème (j'ai rencontré ce problème lorsque j'ai dû tester un long jeton JWT, et l'utilisation de littéraux de modèle n'a pas fait l'affaire.)

Sujit Y. Kulkarni
la source
-3

J'ai essayé un certain nombre des suggestions ci-dessus, mais j'ai reçu un avertissement de caractère ILLEGAL dans l'inspecteur de code Chrome. Ce qui suit a fonctionné pour moi (testé uniquement dans Chrome!)

alert('stuff on line 1\\nstuff on line 2);

sort comme ...

stuff on line 1
stuff on line 2

NOTEZ la double barre oblique inversée !! ... cela semble important!

onionjohnny
la source
-5

Pas besoin de rupture manuelle du code. Ajoutez simplement \ n l'endroit où vous souhaitez vous interrompre.

alert ("Please Select file \n to delete");

Cela montrera l'alerte comme

Please select file 
to delete.
Narendra
la source
votant vers le bas, pouvez-vous expliquer la raison du vote négatif. Cette solution fonctionne toujours pour moi.
Narendra
27
Je ne sais pas qui a voté contre ou pourquoi; mais juste une supposition: l'op voulait savoir comment étendre un littéral de texte sur plusieurs lignes de code, plutôt que d'insérer un saut de ligne dans la sortie.
Zarepheth