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
2525
Newy 30 avril 2009 à 06:11

26 réponses

Meilleure réponse

Mise à jour:

ECMAScript 6 (ES6) introduit un nouveau type de littéral, à savoir modèles de littéraux . 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)

La prise en charge du navigateur est OK, mais vous pouvez utiliser 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"
3181
Andy Mercer 14 févr. 2018 à 16:47

Le moyen le plus simple de créer des chaînes multilignes en Javascript est d'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 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

4
Willem van der Veen 1 oct. 2018 à 21:27

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

87
Peter V. Mørch 3 janv. 2012 à 19:51

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>
8
stillatmycomputer 23 nov. 2010 à 16:46

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:

enter image description here

50
XXN 16 déc. 2016 à 14:20

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

enter image description here

9
seo 30 sept. 2015 à 14:14

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

7
Stefan Steiger 7 oct. 2015 à 13:12

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
Mr. Alien 18 janv. 2014 à 13:18

Tu peux le faire...

var string = 'This is\n' +
'a multiline\n' + 
'string';
206
5 revs, 2 users 97% 19 janv. 2014 à 04:14

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
Community 23 mai 2017 à 12:34

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

5
earl3s 28 mars 2016 à 18:43

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 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
Community 23 mai 2017 à 10:31

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)

24
semente 13 déc. 2011 à 20:09

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>
*/});
18
mightyiam 25 avril 2014 à 11:34

Notez également que, lors de l'extension de la chaîne sur plusieurs lignes à l'aide de la 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
Prakash GPz 13 juil. 2016 à 19:25

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

0
Anmol Saraf 23 nov. 2012 à 13:10

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

En termes de performances, la concaténation Slash (première) est la plus rapide.

Reportez ce cas de test pour plus de détails sur les performances

Mise à jour:

Avec ES2015 , nous pouvons tirer parti 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>
  `
31
Vignesh Subramanian 8 nov. 2016 à 08:33

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 également quelques exemples.

8
Lonnie Best 4 nov. 2015 à 14:06

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

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 des 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
mikemaccana 31 déc. 2014 à 17:48

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 du JavaScript simple, vos utilisateurs finaux vous en seront reconnaissants.

Exemple:

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

3
Pragmatiq 11 oct. 2017 à 23:28

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

Plus de référence ici

6
jenil christo 19 avril 2019 à 07:10

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>
    </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'));
15
mplungjan 17 janv. 2016 à 15:44

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.
2
Sonevol 13 août 2017 à 22:57

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

1
Aditya Hajare 28 janv. 2013 à 12:20

Pour résumer, j'ai essayé 2 approches listées ici dans la programmation javascript des utilisateurs (Opera 11.01):

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

Cela ne fonctionne pas sur Firefox ou l'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.

10
Community 23 mai 2017 à 11:47

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)
135
Luke 21 mars 2013 à 21:05
805107