Question Créer des chaînes multilignes en JavaScript


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

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

1920
2018-04-30 02:11


origine


Réponses:


Mettre à jour:

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

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

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

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

Le support du navigateur est OKmais vous pouvez utiliser transpileurs être plus compatible.


Réponse ES5 originale:

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

"foo \
bar"

2293
2018-04-30 02:15



Mettre à jour:

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

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

L'interpolation des variables est une nouvelle fonctionnalité populaire associée à des chaînes délimitées par des tics arrière:

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

Cela se résume à la concaténation:

user.name + ' liked your post about strings'

Réponse ES5 originale:

Guide de style JavaScript de Google recommande d'utiliser la concaténation de chaînes au lieu d'échapper les nouvelles lignes:

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

Les espaces au début de chaque ligne ne peuvent pas être supprimés en toute sécurité lors de la compilation. espace après la barre oblique se traduira par des erreurs délicates; et bien que la plupart des moteurs de script supportent cela, ils ne font pas partie d'ECMAScript.

Utilisez la concaténation de chaîne à 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.';

1117
2018-06-06 02:30



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

Pour garder le contrôle 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 modèle anonyme a déjà montré (escape newline), 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" bizarre mais qui fonctionne1:

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

édition externe: jsfiddle

[addition 2015]
ES6 prend en charge les chaînes étendues sur plusieurs lignes en utilisant 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 Note: ceci sera perdu après avoir réduit / obscurci votre code


634
2018-04-30 07:22



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

Cette méthode est basée sur la sérialisation des fonctions, qui est défini pour être dépendant de la mise en œuvre. Il fonctionne dans la plupart des navigateurs (voir ci-dessous), mais rien ne garantit qu'il fonctionnera dans le futur, 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 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 dans les navigateurs suivants (non mentionnés = non testés):

  • IE 4 - 10
  • Opera 9.50 - 12 (pas dans 9-)
  • Safari 4 - 6 (pas dans 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 minifieur, cependant. Cela tend à supprimer les commentaires. Pour le Compresseur YUI, un commentaire commençant par /*!(comme celui que j'ai utilisé) sera conservé.

Je pense que réal solution serait d'utiliser CoffeeScript.


327
2018-04-06 18:16



Tu peux le faire...

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

187
2018-03-21 21:05



Je suis venu avec cette méthode trés jimmy d'une chaîne multi-rayée. Puisque la conversion d'une fonction en une chaîne renvoie également des commentaires à l'intérieur de la fonction, vous pouvez utiliser les commentaires comme chaîne en utilisant un commentaire multilinéé / ** /. 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)

107
2018-01-03 19:51



Je suis surpris que je ne l'ai pas vu, parce que 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?


82
2017-08-17 14:25



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

par exemple.

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

Ensuite, quand j'ai besoin d'obtenir la chaîne, j'utilise juste 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


46
2017-08-23 18:30



Utilisation de balises de script:

  • ajouter un <script>...</script> bloc contenant votre texte multiligne dans head marque;
  • obtenir 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>
    

27
2018-05-26 09:34



Il y a 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 concaténation

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

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

Référer  ce cas de test pour plus de détails concernant la performance

Mettre à jour:

Avec le ES2015, nous pouvons tirer parti de sa fonctionnalité de chaînes de modèles. Avec lui, 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>
  `

25
2017-12-13 20:09