Création de chaînes multilignes en JavaScript


2614

J'ai le code suivant en Ruby. Je veux convertir ce code en JavaScript. quel est le code équivalent dans JS?

text = <<"HERE"
This
Is
A
Multiline
String
HERE


Découvrez cela de différentes manières pour obtenir le même résultat. J'ai également ajouté les performances de chaque méthode stackoverflow.com/a/23867090/848841
Vignesh Subramanian

Réponses:


3321

Mise à jour:

ECMAScript 6 (ES6) introduit un nouveau type de littéral, à savoir les littéraux de modèle . Ils ont de nombreuses fonctionnalités, interpolation variable entre autres, mais surtout pour cette question, ils peuvent être multilignes.

Un littéral de modèle est délimité par des backticks :

var html = `
  <div>
    <span>Some HTML here</span>
  </div>
`;

(Remarque: je ne préconise pas d'utiliser HTML dans les chaînes)

Le support du navigateur est OK , mais vous pouvez utiliser des transpilers pour être plus compatible.


Réponse originale ES5:

Javascript n'a pas de syntaxe ici-document. Vous pouvez cependant échapper à la nouvelle ligne littérale qui se rapproche:

"foo \
bar"

231
Soyez averti: certains navigateurs insèreront des sauts de ligne à la suite, d'autres non.
staticsan

35
Visual Studio 2010 semble également être confus par cette syntaxe.
jcollum

47
@Nate Il est spécifié dans la section 7.8.4 de l' ECMA-262 5ème édition et appelé LineContinuation : "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 manière correcte de provoquer un Le caractère de fin de ligne faisant partie de la valeur de chaîne d'un littéral de chaîne consiste à utiliser une séquence d'échappement telle que \ n ou \ u000A. "
certains

16
Je ne vois pas pourquoi vous le feriez lorsque les navigateurs le traitent de manière incohérente. "line1 \ n" + "line2" sur plusieurs lignes est suffisamment lisible et vous garantit un comportement cohérent.
SamStephens

11
"La prise en charge du navigateur est OK" ... non pris en charge par IE11 - pas OK
Tom Andraszek

1318

Mise à jour ES6:

Comme le mentionne la première réponse, avec ES6 / Babel, vous pouvez maintenant créer des chaînes multilignes simplement en utilisant des raccourcis:

const htmlString = `Say hello to 
multi-line
strings!`;

L'interpolation des variables est une nouvelle fonctionnalité populaire qui vient avec des chaînes délimitées par des graduations:

const htmlString = `${user.name} liked your post about strings`;

Cela se traduit simplement par concaténation:

user.name + ' liked your post about strings'

Réponse originale ES5:

Le guide de style JavaScript de Google recommande d'utiliser la concaténation de chaînes au lieu d'échapper aux sauts de ligne:

Ne faites pas cela:

var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error \
                message to make the Energizer bunny blush (right through \
                those Schwarzenegger shades)! Where was I? Oh yes, \
                you\'ve got an error and all the extraneous whitespace is \
                just gravy.  Have a nice day.';

L'espace au début de chaque ligne ne peut pas être supprimé en toute sécurité au moment de la compilation; un espace après la barre oblique entraînera des erreurs délicates; et bien que la plupart des moteurs de script le prennent en charge, il ne fait pas partie d'ECMAScript.

Utilisez plutôt la concaténation de chaînes:

var myString = 'A rather long string of English text, an error message ' +
               'actually that just keeps going and going -- an error ' +
               'message to make the Energizer bunny blush (right through ' +
               'those Schwarzenegger shades)! Where was I? Oh yes, ' +
               'you\'ve got an error and all the extraneous whitespace is ' +
               'just gravy.  Have a nice day.';

19
Je ne comprends pas la recommandation de Google. Tous les navigateurs, à l'exception des très anciens, prennent en charge la barre oblique inverse suivie d'une approche de nouvelle ligne, et continueront de le faire à l'avenir pour une compatibilité descendante. La seule fois où vous auriez besoin de l'éviter, c'est si vous deviez être sûr qu'une et une seule nouvelle ligne (ou aucune nouvelle ligne) a été ajoutée à la fin de chaque ligne (voir aussi mon commentaire sur la réponse acceptée).
Matt Browne

6
Notez que les chaînes de modèle ne sont pas prises en charge dans IE11, Firefox 31, Chrome 35 ou Safari 7. Voir kangax.github.io/compat-table/es6
EricP

29
@MattBrowne La recommandation de Google est déjà documentée par eux, par ordre d'importance des raisons: (1) L'espace au début de chaque ligne [dans l'exemple, vous ne voulez pas cet espace dans votre chaîne, mais il semble plus joli dans le code ] (2) les espaces blancs après la barre oblique entraîneront des erreurs délicates [si vous terminez une ligne avec \ au lieu de `\` c'est difficile à remarquer] et (3) alors que la plupart des moteurs de script le supportent, il ne fait pas partie d'ECMAScript [c'est-à-dire pourquoi utiliser des fonctionnalités non standard?] Rappelez-vous que c'est un guide de style, qui consiste à rendre le code facile à lire + à maintenir + à déboguer: pas seulement "ça marche" correct.
ShreevatsaR

1
étonnant qu'après toutes ces années, la concaténation de chaînes soit toujours la meilleure façon / la plus sûre / la plus conforme de procéder. les littéraux de modèle (réponse ci-dessus) ne fonctionnent pas dans IE et les lignes qui s'échappent ne sont qu'un désordre que vous allez bientôt regretter
Tiago Duarte

1
Nous avons découvert à la dure que les anciennes versions d'Android ne prennent pas en charge les backticks, donc si vous avez une application Android utilisant le WebView, vos backticks empêchent votre application de fonctionner!
Michael Fever

684

le motif text = <<"HERE" This Is A Multiline String HEREn'est pas disponible en js (je me souviens de l'avoir beaucoup utilisé pendant mes bons vieux jours Perl).

Pour garder la surveillance avec des chaînes multilignes complexes ou longues, j'utilise parfois un modèle de tableau:

var myString = 
   ['<div id="someId">',
    'some content<br />',
    '<a href="#someRef">someRefTxt</a>',
    '</div>'
   ].join('\n');

ou le motif anonyme déjà montré (escape newline), qui peut être un vilain bloc dans votre code:

    var myString = 
       '<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';

Voici un autre "truc" 1 étrange mais qui fonctionne : 1

var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

édition externe: jsfiddle

ES20xx prend en charge les chaînes s'étendant sur plusieurs lignes à l'aide de chaînes de modèle :

let str = `This is a text
    with multiple lines.
    Escapes are interpreted,
    \n is a newline.`;
let str = String.raw`This is a text
    with multiple lines.
    Escapes are not interpreted,
    \n is not a newline.`;

1 Remarque: cela sera perdu après avoir réduit / obscurci votre code


34
Veuillez ne pas utiliser le modèle de tableau. Elle sera plus lente que la concaténation de chaîne simple dans la plupart des cas.
BMiner

73
Le modèle de tableau est plus lisible et la perte de performances pour une application est souvent négligeable. Comme le montre ce test de performance, même IE7 peut effectuer des dizaines de milliers d'opérations par seconde.
Benjamin Atkin

19
+1 pour une alternative élégante qui fonctionne non seulement de la même manière dans tous les navigateurs, mais est également évolutive.
Pavel

26
@KooiInc Vos tests commencent avec le tableau déjà créé, qui biaise les résultats. Si vous ajoutez l'initialisation du tableau, la concaténation directe est plus rapide jsperf.com/string-concat-without-sringbuilder/7 Voir stackoverflow.com/questions/51185/… Comme astuce pour les nouvelles lignes, cela peut être OK, mais c'est certainement faire plus de travail qu'il ne le devrait
Juan Mendes

9
@BMiner: 1) "L'optimisation prématurée est la racine de tout mal" - Donald Knuth, et 2) la "lisibilité" est dans l'œil du spectateur
Paul Bennett

348

Vous pouvez avoir des chaînes multilignes en JavaScript pur.

Cette méthode est basée sur la sérialisation des fonctions, qui est définie comme dépendante de l'implémentation . Il fonctionne dans la plupart des navigateurs (voir ci-dessous), mais il n'y a aucune garantie qu'il fonctionnera toujours à l'avenir, alors ne vous y fiez pas.

En utilisant la fonction suivante:

function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*!?/, '').
      replace(/\*\/[^\/]+$/, '');
}

Vous pouvez avoir ici des documents comme celui-ci:

var tennysonQuote = hereDoc(function() {/*!
  Theirs not to make reply,
  Theirs not to reason why,
  Theirs but to do and die
*/});

La méthode a été testée avec succès dans les navigateurs suivants (non mentionnés = non testés):

  • IE 4 - 10
  • Opera 9.50 - 12 (pas en 9-)
  • Safari 4-6 (pas en 3-)
  • Chrome 1-45
  • Firefox 17-21 ( pas dans 16- )
  • Rekonq 0.7.0 - 0.8.0
  • Non pris en charge dans Konqueror 4.7.4

Soyez prudent avec votre minificateur, cependant. Cela a tendance à supprimer les commentaires. Pour le compresseur YUI , un commentaire commençant par /*!(comme celui que j'ai utilisé) sera conservé.

Je pense qu'une vraie solution serait d'utiliser CoffeeScript .

MISE À JOUR ES6: Vous pouvez utiliser le backtick au lieu de créer une fonction avec un commentaire et d'exécuter toString sur le commentaire. Le regex devrait être mis à jour pour ne supprimer que les espaces. Vous pouvez également avoir une méthode de prototype de chaîne pour ce faire:

let foo = `
  bar loves cake
  baz loves beer
  beer loves people
`.removeIndentation()

Ce serait cool. Quelqu'un devrait écrire cette méthode de chaîne .removeIndentation ...;)


232
Quoi!? créer et décompiler une fonction pour pirater un commentaire multiligne en une chaîne multiligne? Maintenant, c'est moche.
fforw

4
jsfiddle.net/fqpwf fonctionne dans Chrome 13 et IE8 / 9, mais pas FF6. Je déteste le dire, mais je l'aime bien, et si cela pouvait être une fonctionnalité intentionnelle de chaque navigateur (pour qu'il ne disparaisse pas), je l'utiliserais.
Jason Kleban

2
@ uosɐſ: pour que ce soit intentionnel, il faut qu'il soit dans la spécification; ou si répandu que les fabricants de navigateurs ne voudraient pas supprimer cette fonctionnalité "accidentelle". Merci pour les expériences cependant ... Essayez un coffeescript.
Jordão

1
a.toString (). substring (15, a.toString (). length-4) fonctionne également, et n'a pas besoin d'analyser la chaîne entière (bien que cela soit très probable et que le comptage en fasse de toute façon un autre balayage. Oh wel .)
Lodewijk

2
Extrêmement pratique. Je l'utilise pour les tests unitaires (Jasmine), mais je l'évite pour le code de production.
Jason


139

Je suis venu avec cette méthode truquée très jimmy d'une chaîne multi doublée. Étant donné que la conversion d'une fonction en chaîne renvoie également tous les commentaires à l'intérieur de la fonction, vous pouvez utiliser les commentaires comme chaîne en utilisant un commentaire multiligne / ** /. Il vous suffit de couper les extrémités et vous avez votre chaîne.

var myString = function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

alert(myString)

37
C'est absolument terrifiant. J'adore ça (bien que vous ayez peut-être besoin de faire un match regex parce que je ne suis pas sûr de la précision de l'espace blanc toString().
Kevin Cox

Cette solution ne semble pas fonctionner dans Firefox, c'est peut-être une fonction de sécurité pour le navigateur? EDIT: Nevermind, cela ne fonctionne que pour Firefox version 16.
Bill Software Engineer

45
Méfiez-vous également des minificateurs qui dépouillent les commentaires ...: D
jondavidjohn

3
C'est pourquoi nous ne pouvons pas avoir de belles choses.
Danilo M. Oliveira

4
Vous pouvez faire des trucs bizarres en terre javascript. Bien qu'en toute honnêteté, vous ne devriez jamais l'utiliser.
Luke

88

Je suis surpris de ne pas l'avoir vu, car cela fonctionne partout où je l'ai testé et est très utile, par exemple pour les modèles:

<script type="bogus" id="multi">
    My
    multiline
    string
</script>
<script>
    alert($('#multi').html());
</script>

Quelqu'un connaît-il un environnement où il y a du HTML mais cela ne fonctionne pas?


23
Partout où vous ne voulez pas placer vos chaînes dans des éléments de script séparés et distants.
Lodewijk

9
Une objection valable! Ce n'est pas parfait. Mais pour les modèles, cette séparation est non seulement correcte, mais peut-être même encouragée.
Peter V. Mørch

1
Je préfère diviser tout sur 80/120 caractères en multiligne, je crains que ce soit plus que des modèles. Je préfère maintenant la syntaxe 'line1' + 'line2'. C'est aussi le plus rapide (bien que cela puisse le rivaliser pour les très gros textes). C'est un bon truc cependant.
Lodewijk

27
en fait, c'est du HTML pas du Javascript: - /
CpILL

5
cependant, la tâche d'obtenir une chaîne multiligne en javascript peut être effectuée de cette façon
Davi Fiamenghi

52

J'ai résolu ce problème en générant un div, en le rendant caché et en appelant l'ID de div par jQuery lorsque j'en avais besoin.

par exemple

<div id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>

Ensuite, lorsque j'ai besoin d'obtenir la chaîne, j'utilise simplement le jQuery suivant:

$('#UniqueID').html();

Ce qui renvoie mon texte sur plusieurs lignes. Si j'appelle

alert($('#UniqueID').html());

Je reçois:

entrez la description de l'image ici


2
Merci pour cela! C'est la seule réponse que j'ai trouvée qui résout mon problème, qui implique que des chaînes inconnues qui peuvent contenir n'importe quelle combinaison de guillemets simples et doubles soient directement insérées dans le code sans possibilité de pré-encodage. (il provient d'un langage de création de modèles qui crée le JS - toujours à partir d'une source fiable et non d'une soumission de formulaire, il n'est donc PAS TOTALEMENT dément).
octobre

C'était la seule méthode qui fonctionnait réellement pour moi pour créer une variable de chaîne javascript sur plusieurs lignes à partir d'une chaîne Java.
beginner_

4
Et si la chaîne est HTML?
Dan Dascalescu

4
$ ('# UniqueID'). Content ()
mplungjan

1
@Pacerier Tout ce que j'ai lu, de Google ainsi que d'autres sites, dit que Google indexe de nos jours le display:nonecontenu, probablement en raison de la popularité des frontaux de style JavaScript. (Par exemple, une page de FAQ avec des fonctionnalités de masquage / affichage.) Vous devez cependant être prudent, car Google dit qu'ils peuvent vous punir si le contenu masqué semble être conçu pour gonfler artificiellement votre classement SEO.
Gavin

31

Il existe plusieurs façons d'y parvenir

1. Concaténation de barre oblique

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2. concaténation régulière

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3. Array Join concatenation

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

Côté performances, la concaténation Slash (première) est la plus rapide.

Reportez - vous à ce cas de test pour plus de détails concernant les performances

Mise à jour:

Avec l' ES2015 , nous pouvons profiter de sa fonction de chaînes de modèles. Avec cela, nous avons juste besoin d'utiliser des back-ticks pour créer des chaînes multi-lignes

Exemple:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

11
Je pense que c'est que vous venez de régurgiter ce qui est déjà sur la page depuis cinq ans, mais d'une manière plus propre.
RandomInsano

la concaténation par slash n'inclura-t-elle pas également les espaces au début des lignes?
f.khantsis

29

Utilisation de balises de script:

  • ajoutez un <script>...</script>bloc contenant votre texte multiligne dans la headbalise;
  • obtenez votre texte multiligne tel quel ... (attention au codage du texte: UTF-8, ASCII)

    <script>
    
        // pure javascript
        var text = document.getElementById("mySoapMessage").innerHTML ;
    
        // using JQuery's document ready for safety
        $(document).ready(function() {
    
            var text = $("#mySoapMessage").html(); 
    
        });
    
    </script>
    
    <script id="mySoapMessage" type="text/plain">
    
        <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="...">
           <soapenv:Header/>
           <soapenv:Body>
              <typ:getConvocadosElement>
                 ...
              </typ:getConvocadosElement>
           </soapenv:Body>
        </soapenv:Envelope>
    
        <!-- this comment will be present on your string -->
        //uh-oh, javascript comments...  SOAP request will fail 
    
    
    </script>

Je pense que cette stratégie est propre et largement sous-utilisée. jsrender l'utilise.
xdhmoore

J'utilise ceci avec innerText iso innerHTML, mais comment puis-je m'assurer que les espaces blancs sont préservés?
David Nouls

Ajax interroge également si vous les utilisez. Vous pouvez essayer de changer vos en-têtes. xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");Je ne me souviens pas avoir eu d'autres problèmes que de mal saisir les commentaires dans JS. Des espaces où aucun problème.
jpfreire

24

J'aime cette syntaxe et cette indentation:

string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';

(mais ne peut pas être considéré comme une chaîne multiligne)


3
Je l'utilise, sauf si je mets le «+» à la fin de la ligne précédente, pour que la déclaration se poursuive sur la ligne suivante. Cependant, votre façon d'aligner les tirets est plus uniforme.
Sean

@Sean je l'utilise aussi, et je préfère toujours mettre le '+' au début de chaque nouvelle ligne ajoutée, et le final ';' sur une nouvelle ligne, parce que je l'ai trouvé plus «correct».
AgelessEssence

7
mettre le + au début permet de commenter cette ligne sans avoir à modifier d'autres lignes lorsque c'est la première / dernière ligne de la séquence.
moliad

3
Je préfère le + à l'avant aussi car visuellement je n'ai pas besoin de balayer jusqu'au bout de la ligne pour savoir que la suivante est une suite.
Daniel Sokolowski

18

Il y a cette bibliothèque qui la rend belle:

https://github.com/sindresorhus/multiline

Avant

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

Après

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

1
Ce support dans nodejs, en utilisant dans le navigateur doit être attentif.
Huei Tan

3
@HueiTan Docs indique que cela fonctionne également dans le navigateur. Ce qui est logique - c'est juste Function.prototype.String().
mikemaccana

ya mais il a dit "Bien que cela fonctionne correctement dans le navigateur, il est principalement destiné à être utilisé dans Node.js. Utilisez à vos risques et périls. Bien qu'il fonctionne correctement dans le navigateur, il est principalement destiné à être utilisé dans Node.js. Utilisation à vos risques et périls." (Juste attention XD)
Huei Tan

@HueiTanYep J'ai lu cette partie. Mais Function.prototype.toString () est assez stable et bien connu.
mikemaccana

1
Meilleure réponse pour moi car elle permet au moins de réaliser plusieurs lignes sans tous les déchets au milieu (les déchets au début et à la fin, je peux les gérer).
Damien Golding

14

Downvoters : Ce code est fourni à titre d'information uniquement.

Cela a été testé dans Fx 19 et Chrome 24 sur Mac

DEMO

var new_comment; /*<<<EOF 
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>:
       </span>
       <span class="comment-text">
          $text
       </span> 
       @<span class="comment-time">
          2d
       </span> ago
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');
<ul></ul>


13
C'est horrible. +1. Et vous pouvez utiliser document.currentScript au lieu de getElement ...
Orwellophile

1
"Vous"
indéfini

1
jsfiddle-fixed - J'ai dû avoir "vous" défini globalement dans ma console. Fonctionne maintenant (chrome / osx). La bonne chose à propos de l'ajout du commentaire à une var est que vous n'êtes pas dans un contexte de fonction, jsfiddle-function-heredoc bien que la fonction soit cool pour les méthodes de classe. il vaut peut-être mieux lui passer un objet replace {this: that} de toute façon. amusant de pousser quelque chose de fou à la limite de toute façon :)
Orwellophile

1
Oublie les rageux. C'est la seule barre de réponse correcte ES6. Toutes les autres réponses nécessitent une concaténation, un calcul quelconque ou un échappement. C'est en fait assez cool et je vais l'utiliser comme un moyen d'ajouter de la documentation à un jeu sur lequel je travaille comme passe-temps. Tant que cette astuce n'est pas utilisée pour quoi que ce soit qui pourrait invoquer un bogue (je peux voir comment quelqu'un irait "Point-virgule, derp. Permet de mettre le commentaire sur la ligne suivante." Puis il casse votre code.) Mais, est c'est vraiment un gros problème dans mon jeu de passe-temps? Non, et je peux utiliser l'astuce cool pour quelque chose d'utile. Très bonne réponse.
Thomas Dignan

2
Je n'ai jamais été assez courageux pour utiliser cette technique dans le code de production, mais lorsque je l'utilise beaucoup, c'est dans les tests unitaires, où il est souvent plus facile de vider la valeur d'une structure sous forme de chaîne (assez longue) et de la comparer à ce que cela «devrait» être.
Ben McIntyre

10

pour résumer, j'ai essayé 2 approches listées ici dans la programmation javascript de l'utilisateur (Opera 11.01):

Je recommande donc l'approche de travail pour les utilisateurs JS d'Opera. Contrairement à ce que l'auteur disait:

Cela ne fonctionne pas sur firefox ou opéra; uniquement sur IE, chrome et safari.

Il fonctionne dans Opera 11. Au moins dans les scripts JS utilisateur. Dommage que je ne puisse pas commenter les réponses individuelles ou voter la réponse, je le ferais immédiatement. Si possible, quelqu'un avec des privilèges plus élevés, faites-le pour moi.


Ceci est mon premier commentaire réel. J'ai obtenu le privilège de vote positif il y a 2 jours, j'ai donc immédiatement voté pour la seule réponse que j'ai mentionnée ci-dessus. Merci à tous ceux qui ont voté pour ma faible tentative d'aider.
Tyler

Merci à tous ceux qui ont voté pour cette réponse: j'ai maintenant assez de privilèges pour poster des commentaires normaux! Merci encore.
Tyler

10

Mon extension à https://stackoverflow.com/a/15558082/80404 . Il attend un commentaire sous une forme /*! any multiline comment */où le symbole! est utilisé pour empêcher le retrait par minification (au moins pour le compresseur YUI)

Function.prototype.extractComment = function() {
    var startComment = "/*!";
    var endComment = "*/";
    var str = this.toString();

    var start = str.indexOf(startComment);
    var end = str.lastIndexOf(endComment);

    return str.slice(start + startComment.length, -(str.length - end));
};

Exemple:

var tmpl = function() { /*!
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    </ul>
 </div>
*/}.extractComment();

9

Mise à jour pour 2015 : c'est six ans plus tard maintenant: la plupart des gens utilisent un chargeur de module, et les systèmes de modules principaux ont chacun des moyens de charger des modèles. Ce n'est pas en ligne, mais le type de chaîne multiligne le plus courant est les modèles, et les modèles doivent généralement être gardés hors de JS de toute façon .

require.js: «exiger du texte».

Utilisation du plugin 'text' require.js , avec un modèle multiligne dans template.html

var template = require('text!template.html')

NPM / browserify: le module 'brfs'

Browserify utilise un module «brfs» pour charger les fichiers texte. Cela créera en fait votre modèle dans votre code HTML groupé.

var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');

Facile.


9

Si vous êtes prêt à utiliser les sauts de ligne échappés, ils peuvent être bien utilisés . Il ressemble à un document avec une bordure de page .

entrez la description de l'image ici


2
Cela n'ajouterait-il pas des espaces vides étrangers?
tomByrer

1
@tomByrer Oui, bonne observation. C'est seulement bon pour les chaînes dont vous ne vous souciez pas des espaces blancs, par exemple HTML.
seo


8

Cela fonctionne dans IE, Safari, Chrome et Firefox:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="crazy_idea" thorn_in_my_side='<table  border="0">
                        <tr>
                            <td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
                        </tr>
                    </table>'></div>
<script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>

6
Pensez-y. Pensez-vous que c'est valable? Ne pensez-vous pas que cela peut causer des problèmes d'affichage?
Sk8erPeter

5
Pourquoi les downvotes? C'est une réponse créative, sinon très pratique!
dotancohen

2
non ce n'est pas. Il faut plutôt utiliser des modèles: $ .tmpl () ( api.jquery.com/tmpl ), ou EJS ( embeddedjs.com/getting_started.html ), etc. cela peut entraîner d'énormes problèmes d'affichage.
Sk8erPeter

J'espère que personne n'utilisera jamais cette réponse dans la pratique, mais c'est une
bonne

7

Vous pouvez utiliser TypeScript (JavaScript SuperSet), il prend en charge les chaînes multilignes et les transpile en JavaScript pur sans surcharge:

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

Si vous souhaitez accomplir la même chose avec du JavaScript simple:

var templates = 
{
 myString: function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

}
alert(templates.myString)

Notez que l'iPad / Safari ne prend pas en charge 'functionName.toString()'

Si vous avez beaucoup de code hérité, vous pouvez également utiliser la variante JavaScript simple dans TypeScript (à des fins de nettoyage):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

et vous pouvez utiliser l'objet chaîne multiligne de la variante JavaScript simple, où vous placez les modèles dans un autre fichier (que vous pouvez fusionner dans le bundle).

Vous pouvez essayer TypeScript sur
http://www.typescriptlang.org/Playground


Toute documentation sur la limitation iPad / Safari? MDN semble penser que tout va bien - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Campbeln

@Campbeln: CoWorker me l'a dit (il a utilisé le code). Je ne l'ai pas testé moi-même. Peut également dépendre de la version iPad / Safari - dépend donc probablement.
Stefan Steiger

6

La manière ES6 de le faire serait d'utiliser des littéraux de modèle:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Plus de référence ici


Cette réponse est non seulement petite, incomplète et mal formatée, mais n'ajoute absolument rien aux réponses précédentes. Le marquer et sauter pour être supprimé.
Victor Schröder


4

Le moyen le plus simple de créer des chaînes multilignes dans Javascrips est d'utiliser des astuces (``). Cela vous permet de créer des chaînes multilignes dans lesquelles vous pouvez insérer des variables avec ${variableName}.

Exemple:

let name = 'Willem'; 
let age = 26;

let multilineString = `
my name is: ${name}

my age is: ${age}
`;

console.log(multilineString);

compatibilité :

  • Il a été introduit dans ES6//es2015
  • Il est désormais pris en charge nativement par tous les principaux fournisseurs de navigateurs (sauf Internet Explorer)

Vérifiez la compatibilité exacte dans les documents Mozilla ici


Est-ce maintenant compatible avec tous les navigateurs récents? Ou existe-t-il des navigateurs qui ne prennent toujours pas en charge cette syntaxe?
cmpreshn

Désolé pour mon commentaire extrêmement tardif, la réponse a ajouté des informations de compatibilité;)
Willem van der Veen

3

Ma version de jointure basée sur un tableau pour la concaténation de chaînes:

var c = []; //c stands for content
c.push("<div id='thisDiv' style='left:10px'></div>");
c.push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));

Cela a bien fonctionné pour moi, d'autant plus que j'insère souvent des valeurs dans le html construit de cette façon. Mais il a beaucoup de limites. Le retrait serait bien. Ne pas avoir à traiter avec des guillemets imbriqués serait vraiment bien, et juste l'encombrement me dérange.

Le .push () à ajouter au tableau prend-il beaucoup de temps? Voir cette réponse connexe:

( Y a - t-il une raison pour laquelle les développeurs JavaScript n'utilisent pas Array.push ()? )

Après avoir regardé ces tests (opposés), il semble que .push () soit bien pour les tableaux de chaînes qui ne dépasseront probablement pas plus de 100 éléments - je l'éviterai en faveur des ajouts indexés pour les tableaux plus grands.


3

Vous pouvez utiliser +=pour concaténer votre chaîne, il semble que personne n'a répondu à cela, ce qui sera lisible, et aussi soigné ... quelque chose comme ça

var hello = 'hello' +
            'world' +
            'blah';

peut aussi s'écrire

var hello = 'hello';
    hello += ' world';
    hello += ' blah';

console.log(hello);

3

Notez également que, lors de l'extension de la chaîne sur plusieurs lignes à l'aide d'une barre oblique inverse à la fin de chaque ligne, tout caractère supplémentaire (principalement des espaces, des tabulations et des commentaires ajoutés par erreur) après la barre oblique inverse provoquera une erreur de caractère inattendue, que j'ai mis une heure à trouver en dehors

var string = "line1\  // comment, space or tabs here raise error
line2";

3

Pour l'amour d'Internet, utilisez la concaténation de chaînes et choisissez de ne pas utiliser les solutions ES6 pour cela. ES6 n'est PAS pris en charge dans tous les domaines, tout comme CSS3 et certains navigateurs étant lents à s'adapter au mouvement CSS3. Utilisez JavaScript tout simplement, vos utilisateurs finaux vous remercieront.

Exemple:

var str = "This world is neither flat nor round. "+ "Once was lost will be found";


3
bien que je sois d'accord avec votre point, je n'appellerais pas javascript "bon" ol
user151496

2

Vous devez utiliser l'opérateur de concaténation '+'.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var str = "This "
                + "\n<br>is "
                + "\n<br>multiline "
                + "\n<br>string.";
        document.getElementById("demo").innerHTML = str;
     </script>
</body>
</html>

En utilisant \nvotre code source ressemblera à -

Cette 
 <br> c'est
 <br> multiligne
 <br> chaîne.

En utilisant <br>la sortie de votre navigateur, vous aurez l'impression -

Cette
est
multiligne
chaîne.

1

Je pense que cette solution devrait fonctionner dans IE, Chrome, Firefox, Safari, Opera -

Utilisation de jQuery :

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert($('#unique_id').html());
</script>

Utilisation de Javascript pur:

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert(document.getElementById('unique_id').innerHTML);
</script>

À votre santé!!


<xmp>est tellement obsolète. Il peut être autorisé en HTML, mais ne doit être utilisé par aucun auteur. Voir stackoverflow.com/questions/8307846/…
Bergi

@Bergi, vous avez raison .. et utiliser <pre>;avec des échappements n'aidera pas ma solution .. J'ai rencontré un problème similaire aujourd'hui et j'essaie de trouver une solution .. mais dans mon cas, j'ai trouvé un moyen très n00bish de résoudre ce problème en mettre la sortie dans des commentaires html au lieu de <xmp> ou de toute autre balise. lol. Je sais que ce n'est pas une façon standard de le faire, mais je travaillerai sur cette question plus demain matin .. A bientôt !!
Aditya Hajare

Malheureusement, même avec style="display:none"Chrome, il essaie de charger les <img>images mentionnées dans l'exemple de bloc.
Jesse Glick

0

Je viens d'essayer la réponse anonyme et j'ai trouvé qu'il y avait une petite astuce ici, cela ne fonctionne pas s'il y a un espace après la barre oblique inverse. \
La solution suivante ne fonctionne donc pas -

var x = { test:'<?xml version="1.0"?>\ <-- One space here
            <?mso-application progid="Excel.Sheet"?>' 
};

Mais lorsque l'espace est supprimé, cela fonctionne -

var x = { test:'<?xml version="1.0"?>\<-- No space here now
          <?mso-application progid="Excel.Sheet"?>' 
};

alert(x.test);​

J'espère que cela aide !!


7
bien évidemment si vous avez un espace après une barre oblique inverse, la barre oblique inverse échappe à l'espace. Il est censé échapper à la rupture de ligne, pas à l'espace.
Sejanus
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.