Création de chaînes multilignes en JavaScript

mise à jour ES6:

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

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

l'Interpolation des variables est une nouvelle fonctionnalité qui vient avec retour-tique délimité par des chaînes:

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

This just transpires down to concatenation:

user.name + ' liked your post about strings'

Original ES5 answer:

Guide de style JavaScript de Google recommande d'utiliser la concaténation chaîne au lieu d'échapper à newlines:

ne faites pas ceci:

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.';

les espaces blancs au début de chaque ligne ne peuvent pas être supprimés en toute sécurité au moment de la compilation; les espaces blancs après la barre oblique résulteront en erreurs délicates; et bien que la plupart des moteurs de script supportent cela, cela ne fait pas partie d'ECMAScript.

utilisez chaîne de concaténation à la place:

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.';

le modèle text = <<"HERE" This Is A Multiline String HERE n'est pas disponible dans js (je me souviens l'avoir beaucoup utilisé dans Mes bons vieux jours Perl).

pour garder la surveillance avec des chaînes multilignes complexes ou longues, j'utilise parfois un motif de tableau:

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

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

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

voici un autre truc bizarre mais efficace ¹ :

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 l'extension de chaînes sur plusieurs lignes en utilisant template strings :

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.`;

¹ Note: Ce sera perdu après minifying / obfuscating votre code

vous can ont des chaînes multilignes en JavaScript pur.

cette méthode est basée sur la sérialisation des fonctions, qui est défini comme dépendant de la mise en œuvre . Il fonctionne dans la plupart des navigateurs (voir ci-dessous), mais il n'y a aucune garantie que cela fonctionnera encore dans l'avenir, donc ne comptez pas sur elle.

utilisant la fonction suivante:

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

vous pouvez avoir ici-documents comme ceci:

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 sur les navigateurs suivants (non mentionné = non testé):

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

faites attention avec votre minificateur. Il tend à supprimer les commentaires. Pour le Yui compresseur , un commentaire commençant par /*! (comme celui que j'ai utilisé) sera conservé.

je pense qu'un réel solution serait d'utiliser des CoffeeScript .

Vous pouvez le faire...

var string = 'This is\n' +
'a multiline\n' + 
'string';

j'ai inventé cette méthode très jimmy gréée d'une corde multi-doublée. Comme la conversion d'une fonction en une chaîne de caractères renvoie aussi tous les commentaires à l'intérieur de la fonction, vous pouvez utiliser les commentaires comme votre chaîne de caractères en utilisant un commentaire multilingue /**/. Vous avez juste à 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)

je suis surpris que je ne l'ai pas vu, parce qu'il fonctionne partout où je l'ai testé et est très utile pour par exemple modèles:

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

est-ce que quelqu'un connaît un environnement où il y a du HTML mais qui ne fonctionne pas?

j'ai résolu ceci en sortant un div, le rendant caché, et en appelant le div id par jQuery quand j'en avais besoin.

p.ex.

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

alors quand j'ai besoin d'obtenir la chaîne, j'utilise juste le jQuery suivant:

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

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

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

, j'obtiens:

à l'Aide de balises de script:

• ajouter un <script>...</script> bloc contenant votre texte à plusieurs lignes en head étiquette;

• obtenez votre texte multiligne tel quel... (attention au codage de 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>
  

il y a plusieurs façons d'y parvenir

1. Slash concaténation

  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. Tableau de Rejoindre la concaténation de

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

Performance sage, Barre de concaténation (le premier) est le plus rapide.

Consultez ce cas d'essai pour plus de détails concernant la performance

mise à jour:

avec le ES2015 , nous pouvons profiter de sa fonctionnalité de chaînes de Modèles. Avec elle, nous avons juste besoin d'utiliser 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>
  `

j'aime cette syntaxe et indentation:

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

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

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>
*/});

Downvoters : ce code n'est fourni qu'à titre d'information.

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

DÉMO

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>
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

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

• celui-ci n'a pas fonctionné: création de chaînes multilignes en JavaScript
• cela a assez bien fonctionné, j'ai aussi trouvé comment le faire paraître bien dans la vue source de Notepad++: création de chaînes multilignes en JavaScript

donc je recommande le travail approche pour les utilisateurs D'Opera JS. Contrairement à ce que disait l'auteur:

il ne fonctionne pas sur firefox ou opera; seulement sur IE, chrome et safari.

ça marche à Opera 11. Au moins dans les scripts utilisateur JS. Dommage que je ne puisse pas faire de commentaires sur les réponses individuelles ou upvote la réponse, je le ferais immédiatement. Si possible, quelqu'un avec plus de privilèges s'il vous plaît le faire pour moi.

mis à jour pour 2015 : c'est maintenant six ans plus tard: la plupart des gens utilisent un chargeur de module, et les systèmes de modules principaux ont chacun des moyens de charger des gabarits. Il n'est pas en ligne, mais le type le plus commun de chaîne de caractères multilignes sont les gabarits, et gabarits devraient généralement être tenus hors de JS de toute façon .

exiger.js: exigent "texte".

utilisant require.js "texte" plugin , avec un modèle multiligne dans le modèle .html

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

NGP/browserify: le "brfs" module

Browserify utilise un module' brfs ' pour charger des fichiers texte. Cela va réellement construire votre modèle dans votre html empaqueté.

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

facile.

si vous êtes prêt à utiliser les nouvelles lignes échappées, ils peuvent être utilisés nicely . Il ressemble à un document avec une bordure de page .

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 .00</span></td>
                        </tr>
                    </table>'></div>
<script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>

mon extension à https://stackoverflow.com/a/15558082/80404 . Il attend un commentaire dans une forme /*! any multiline comment */ où le symbole ! est utilisé pour empêcher le démontage 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();

vous pouvez utiliser TypeScript (JavaScript SuperSet), il prend en charge les chaînes multilignes, et transpires retour vers le bas à JavaScript pur sans frais généraux:

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

alert(templates.myString);

si vous voulez accomplir la même chose avec 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 supporte pas 'functionName.toString()'

si vous avez beaucoup de code d'héritage, vous pouvez également utiliser la variante JavaScript simple dans Tapescript (à des fins de nettoyage):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

et vous pouvez utiliser l'objet multiligne-chaîne de la variante JavaScript simple, où vous mettez les gabarits dans un autre fichier (que vous pouvez fusionner dans le faisceau).

vous pouvez essayer le typographie à

http://www.typescriptlang.org/Playground

l'équivalent en javascript est:

var text = `
This
Is
A
Multiline
String
`;

Voici la spécification . Voir la prise en charge du navigateur au bas de cette page . Voici quelques exemples .

ES6 vous permet d'utiliser un backtick pour spécifier une chaîne sur plusieurs lignes. Ça s'appelle un modèle littéral. Comme ceci:

var multilineString = `One line of text
    second line of text
    third line of text
    fourth line of text`;

utilise le backtick fonctionne dans NodeJS, et il est soutenu par Chrome, Firefox, Edge, Safari, et Opera.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

ma version de jointure basée sur un tableau pour chaîne concat:

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, surtout que j'insère souvent des valeurs dans le html construit de cette façon. Mais il a beaucoup de limitations. Une Indentation serait bien. Ne pas avoir à traiter avec les guillemets emboîtés serait vraiment agréable, et juste la lourdeur de celui-ci me dérange.

est le .push() pour ajouter à l'éventail de prendre beaucoup de temps? Voir cette réponse:

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

après avoir regardé ces essais (opposés), on dirait .push () est parfait pour les tableaux de chaînes de caractères qui ne dépasseront probablement pas 100 éléments - Je l'éviterai en faveur des ajouts indexés pour les tableaux plus grands.

Vous pouvez utiliser += pour concaténer votre chaîne, semble comme personne ne répondait, qui sera lisible, et aussi soignée... quelque chose comme ça

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

peut aussi s'écrire comme

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

console.log(hello);

aussi noter que, lors de l'extension de la chaîne sur plusieurs lignes en utilisant le antislash en avant à la fin de chaque ligne, tout caractère supplémentaire (la plupart des espaces, onglets et commentaires ajoutés par erreur) après le antislash en avant causera une erreur de caractère inattendue, ce que j'ai pris une heure pour le découvrir

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

s'il vous Plaît, pour l'amour de l'utilisation d'internet de concaténation de chaîne et de choisir de ne pas utiliser ES6 des solutions pour cela. ES6 n'est pas supporté partout, un peu comme CSS3 et certains navigateurs étant lents à s'adapter au mouvement CSS3. Utilisez le bon vieux JavaScript, vos utilisateurs finaux vous remercieront.

exemple:

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

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 maintenant nativement pris en charge par tous les principaux navigateurs vendeurs (sauf internet explorer)

Vérifiez la compatibilité exacte dans Mozilla docs ici

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 \n votre code source ressemblera à -

This 
 <br>is
 <br>multiline
 <br>string.

en utilisant <br> la sortie de votre navigateur ressemblera à -

This
is
multiline
string.

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

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

Utilisant Pur Javascript:

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

santé!!

vient d'essayer la réponse anonyme et trouvé il ya un petit truc ici, il ne fonctionne pas s'il ya un espace après backslash \

Donc la solution suivante ne fonctionne pas -

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

mais quand l'espace est enlevé il fonctionne -

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

alert(x.test);​

Espère que cela aide !!

si vous vous trouvez à exécuter dans le noeud seulement, vous pouvez utiliser le module fs pour lire dans la chaîne multi-ligne à partir d'un fichier:

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});