Création de chaînes multilignes en JavaScript

StackOverflow https://stackoverflow.com/questions/805107

Question

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
Était-ce utile?

La solution

Mise à jour:

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

Un littéral de modèle est délimité par des antécédents : 

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

(Remarque: je ne préconise pas l'utilisation de HTML dans les chaînes)

La prise en charge du navigateur est correcte , mais vous pouvez utiliser transpilers pour être plus compatibles.

Réponse ES5 d'origine:

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

"foo \
bar"

Autres conseils

Mise à jour ES6:

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

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

L’interpolation de variables est une nouvelle fonctionnalité répandue, fournie avec des chaînes délimitées par des guillemets: 

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

Ceci se résume à la concaténation: 

user.name + ' liked your post about strings'

Réponse ES5 d'origine:

  

Le guide de style JavaScript de Google recommande d'utiliser la concaténation de chaînes. d'échapper aux nouvelles lignes:

     

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 au début de chaque ligne ne peuvent pas être supprimés en toute sécurité au moment de la compilation; les espaces après la barre oblique entraîneront des erreurs délicates; et bien que la plupart des moteurs de script le prennent en charge, cela 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 modèle text = <<"HERE" This Is A Multiline String HERE n’est pas disponible dans js (je me souviens de l’avoir beaucoup utilisé ces derniers temps.)

Pour garder le contrôle sur les 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é (échappe nouvelle ligne), ce qui peut être un bloc moche dans votre code: 

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

Voici un autre "truc" étrange mais efficace 1 : 

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

modification externe: jsfiddle

ES20xx prend en charge le fractionnement de chaînes sur plusieurs lignes à l'aide du modèle. chaînes de caractères : 

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: cette information sera perdue après la réduction / obscurcissement de votre code

Vous pouvez le faire ... 

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

Je suis venu avec cette méthode très jimmy truquée d'une chaîne multi-ligné. Étant donné que la conversion d'une fonction en chaîne renvoie également les commentaires qu'elle contient, vous pouvez les utiliser comme chaîne à l'aide d'un commentaire multiligne / ** /. Vous devez 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 de ne pas avoir vu cela, car cela fonctionne partout où je l'ai testé et est très utile, 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 ça ne marche pas?

J'ai résolu ce problème en affichant un div, en le masquant, et en l'appelant id de jQuery quand 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();

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

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

je reçois:

entrer la description de l'image ici

Il y a plusieurs façons d'y parvenir

1. Concaténation de slash 

  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. Concaténation de jointures de tableaux 

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

En ce qui concerne les performances, la concaténation des barres obliques (la première) est la plus rapide.

Consultez ce scénario de test pour plus d'informations sur les performances

.

Mise à jour:

Grâce à ES2015 , vous pouvez tirer parti de sa fonctionnalité Chaînes de modèles. Avec cela, nous avons juste besoin d’utiliser des ticks arrière pour créer des chaînes multilignes

Exemple: 

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

Utilisation des balises de script:

  • ajoutez un bloc <script>...</script> contenant votre texte multiligne dans head balise;

  • récupérez votre texte multiligne tel quel ... (faites 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>

J'aime cette syntaxe et cette indentation: 

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

(mais ne peut en réalité ê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>
*/});

Les votes bas : ce code est fourni à titre d'information uniquement.

Ceci a été testé sous 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>
    </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é deux approches énumérées ici dans la programmation javascript de l’utilisateur (Opera 11.01):

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

  

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

Cela fonctionne dans Opera 11. Au moins dans les scripts utilisateur JS. Dommage que je ne puisse pas commenter les réponses individuelles ni faire passer la réponse au vote up-up, je le ferais immédiatement. Si possible, faites-le pour moi avec des privilèges plus élevés.

Mise à jour pour 2015 : six ans plus tard à présent: la plupart des gens utilisent un chargeur de modules et les systèmes de modules principaux disposent chacun de méthodes de chargement des modèles. Ce n'est pas inline, mais le type le plus courant de chaîne multiligne est le modèle, et les modèles doivent généralement rester en dehors de JS . .

require.js: 'require text'.

Utilisation du plug-in "texte" , 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 des fichiers texte. Cela construira réellement votre modèle dans votre HTML fourni. 

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

Facile.

Si vous êtes prêt à utiliser les nouvelles lignes d'échappement, vous pouvez les utiliser joliment . Cela ressemble à un document avec une bordure de page .

entrer la description de l'image ici

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>

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

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 .

Vous pouvez utiliser TypeScript (JavaScript SuperSet), il prend en charge les chaînes multilignes et les transfère de manière pure. JavaScript sans frais généraux: 

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 en clair dans TypeScript (à des fins de nettoyage): 

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

et vous pouvez utiliser l'objet multiline-string de la variante JavaScript, dans lequel vous placez les modèles dans un autre fichier (que vous pouvez fusionner dans l'ensemble).

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

ES6 vous permet d’utiliser un backtick pour spécifier une chaîne sur plusieurs lignes. C'est ce qu'on 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`;

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

https://developer.mozilla.org/en -FR / docs / Web / JavaScript / Référence / Template_literals

La méthode la plus simple pour créer des chaînes multilignes dans Javascrips consiste à utiliser des backticks (``). 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 maintenant supporté nativement par tous les principaux fournisseurs de navigateurs (sauf Internet Explorer)

Vérifiez la compatibilité exacte dans les documents Mozilla

Ma version de la 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 code HTML construit de cette manière. Mais il a beaucoup de limites. L'indentation serait bien. Ne pas avoir à traiter avec des guillemets imbriqués serait vraiment sympa, et la simplicité de son utilisation me gêne.

Est-ce que le .push () à ajouter au tableau prend beaucoup de temps? Voir cette réponse:

( les développeurs JavaScript ont-ils une raison de ne pas ne pas utiliser Array.push ()? )

Après avoir examiné ces exécutions de tests (opposées), il semble que .push () convient parfaitement aux tableaux de chaînes de caractères qui ne vont probablement pas dépasser 100 éléments. Je l'éviterai en faveur des ajouts indexés pour les tableaux de grande taille.

Vous pouvez utiliser += pour concaténer votre chaîne, il semble que personne ne réponde à cela, ce qui sera lisible, et aussi très bien ... quelque chose comme ça 

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

peut également être écrit comme 

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

console.log(hello);

Notez également que, lorsque vous étendez une chaîne sur plusieurs lignes en utilisant une barre oblique inversée à la fin de chaque ligne, tous les caractères supplémentaires (principalement des espaces, des tabulations et des commentaires ajoutés par erreur) après une barre oblique inversée entraînent une erreur de caractère inattendue. heure pour savoir 

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

S'il vous plaît, par amour de l'Internet, utilisez la concaténation de chaînes et choisissez de ne pas utiliser les solutions ES6 pour cela. ES6 n'est PAS supporté dans tous les domaines, un peu comme CSS3 et certains navigateurs sont lents à s'adapter au mouvement CSS3. Utilisez plain ol 'JavaScript, vos utilisateurs finaux vous en 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 \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.

La méthode ES6 consiste à utiliser des littéraux de modèle: 

const str = `This 

is 

a

multiline text`; 

console.log(str);

Plus de références ici

Je pense que cette solution de contournement 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>

À la vôtre !!

J'ai juste essayé la réponse anonyme et constaté qu'il existe un petit truc ici. Cela ne fonctionne pas s'il y a un espace après la barre oblique inverse \
Donc, la solution suivante ne fonctionne 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 ça aide !!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top