Vraag Meerdere strings maken in JavaScript


Ik heb de volgende code in Ruby. Ik wil deze code omzetten in JavaScript. wat is de equivalente code in JS?

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

1920
2018-04-30 02:11


oorsprong


antwoorden:


Bijwerken:

ECMAScript 6 (ES6) introduceert een nieuw type letterlijk, namelijk sjabloon letterlijke. Ze hebben vele functies, variabele interpolatie onder andere, maar vooral voor deze vraag kunnen ze multiline zijn.

Een letterlijke sjabloon wordt begrensd door backticks:

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

(Opmerking: ik pleit niet voor het gebruik van HTML in strings)

Browserondersteuning is OK, maar je kunt gebruiken transpilers om meer compatibel te zijn.


Origineel ES5-antwoord:

Javascript heeft geen hier-document syntaxis. Je kunt echter ontsnappen aan de letterlijke nieuwe regel die in de buurt komt:

"foo \
bar"

2293
2018-04-30 02:15



Bijwerken:

Zoals het eerste antwoord vermeldt, kunt u met ES6 / Babel nu multi-line strings maken door simpelweg backticks te gebruiken:

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

Interpolerende variabelen is een populaire nieuwe functie die wordt geleverd met back-tick gescheiden reeksen:

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

Dit transpireert gewoon naar concatenatie:

user.name + ' liked your post about strings'

Origineel ES5-antwoord:

JavaScript-stijlgids van Google beveelt aan om aaneenschakeling van tekenreeksen te gebruiken in plaats van aan nieuwe regels te ontkomen:

Doe dit niet:

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

De spatie aan het begin van elke regel kan niet veilig worden gestript tijdens het compileren; witruimte na de schuine streep resulteert in lastige fouten; en hoewel de meeste script-engines dit ondersteunen, maakt het geen deel uit van ECMAScript.

Gebruik in plaats hiervan tekenreeksaaneenschakeling:

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



het patroon text = <<"HERE" This Is A Multiline String HERE is niet beschikbaar in js (ik weet nog dat ik het veel gebruikte in mijn goede oude Perl-dagen).

Om overzicht te houden met complexe of lange multiline strings gebruik ik soms een array-patroon:

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

of het patroon anoniem al getoond (escape newline), wat een lelijk blok in je code kan zijn:

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

Hier is nog een rare maar werkende 'truc'1:

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

externe bewerking: jsfiddle

[toevoeging 2015]
ES6 ondersteunt het overbruggen van strings over meerdere lijnen met behulp van sjabloonstrings:

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 Opmerking: dit gaat verloren na het verkleinen / versluieren van uw code


634
2018-04-30 07:22



U kan heb multiline strings in pure JavaScript.

Deze methode is gebaseerd op de serialisatie van functies gedefinieerd als implementatieafhankelijk. Het werkt in de meeste browsers (zie hieronder), maar er is geen garantie dat het in de toekomst nog steeds werkt, dus vertrouw er niet op.

Met behulp van de volgende functie:

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

Je kunt hier-documenten hebben zoals deze:

var tennysonQuote = hereDoc(function() {/*!
  Theirs not to make reply,
  Theirs not to reason why,
  Theirs but to do and die
*/});

De methode is met succes getest in de volgende browsers (niet vermeld = niet getest):

  • IE 4 - 10
  • Opera 9.50 - 12 (niet in 9-)
  • Safari 4 - 6 (niet in 3)
  • Chrome 1 - 45
  • Firefox 17 - 21 (niet in 16-)
  • Rekonq 0.7.0 - 0.8.0
  • Niet ondersteund in Konqueror 4.7.4

Wees echter voorzichtig met je mijnwerker. Het heeft de neiging om opmerkingen te verwijderen. Voor de YUI-compressor, een reactie die begint met /*!(zoals degene die ik heb gebruikt) zal worden bewaard.

Ik denk dat een echt oplossing zou zijn om te gebruiken CoffeeScript.


327
2018-04-06 18:16



Je kan dit doen...

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

187
2018-03-21 21:05



Ik bedacht deze jimmy opgetuigde methode van een multi-lined string. Omdat het converteren van een functie naar een tekenreeks ook eventuele opmerkingen binnen de functie retourneert, kunt u de opmerkingen gebruiken als uw tekenreeks met een commentaar met meerdere regels / ** /. Je hoeft alleen maar de uiteinden af ​​te knippen en je hebt je touw.

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



Het verbaast me dat ik dit niet heb gezien, omdat het overal werkt waar ik het heb getest en zeer nuttig is voor bijvoorbeeld templates:

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

Weet iemand van een omgeving waar HTML is, maar het werkt niet?


82
2017-08-17 14:25



Ik loste dit op door een div uit te voeren, deze verborgen te maken en de div-id door jQuery te laten noemen wanneer ik het nodig had.

bijv.

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

Als ik dan de string moet halen, gebruik ik gewoon de volgende jQuery:

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

Die mijn tekst op meerdere regels retourneert. Als ik bel

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

Ik krijg:

enter image description here


46
2017-08-23 18:30



Scripttags gebruiken:

  • Voeg een ... toe <script>...</script> blok met je multiline-tekst erin head label;
  • krijg je tekst in meerdere regels zoals het is ... (pas op voor tekstcodering: 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



Er zijn meerdere manieren om dit te bereiken

1. Slash-aaneenschakeling

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2. regelmatige aaneenschakeling

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3. Array Voeg aaneenschakeling toe

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

Prestaties wijs, Slash-aaneenschakeling (eerste) is de snelste.

Verwijzen  deze testcase voor meer informatie over de uitvoering

Bijwerken:

Met de ES2015, we kunnen profiteren van de functie Sjabloonstrings. Hiermee hoeven we alleen back-ticks te gebruiken voor het maken van strings met meerdere regels

Voorbeeld:

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



Ik hou van deze syntaxis en indendation:

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

(maar kan in feite niet worden beschouwd als multiline string)


24
2018-04-25 11:34