Création de chaînes multilignes en JavaScript

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

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"

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

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" ¹ étrange mais qui fonctionne : ¹

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

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

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

Tu peux le faire...

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

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)

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?

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:

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

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>

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)

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

pour résumer, j'ai essayé 2 approches listé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 également compris comment le rendre beau dans la vue source de Notepad ++: Création de chaînes multilignes en JavaScript

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.

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();

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.

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 .

L'équivalent en javascript est:

var text = `
This
Is
A
Multiline
String
`;

Voici la spécification . Voir le support du navigateur au bas de cette page . Voici également quelques exemples .

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>

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

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

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

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

L'utilisation du backtick fonctionne dans NodeJS et est prise en charge par Chrome, Firefox, Edge, Safari et Opera.

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

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

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.

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

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

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

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.

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

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