„Multi-line“ styginių kūrimas „JavaScript“

Turiu šį kodą rubinu. Noriu šį kodą paversti javascript. Kas yra lygiavertis kodas js?

 text = <<"HERE" This Is A Multiline String HERE 
1981 m
30 апр. nustatė Newy balandžio 30 d 2009-04-30 05:11 '09, 5:11 am. 2009-04-30 05:11
@ 36 atsakymai
  • 1
  • 2

Atnaujinti:

ECMAScript 6 (ES6) pristato naują tipo pažodinį, ty šablonų literatūrą . Jie turi daug funkcijų, kintančių interpoliacijų, bet svarbiausia šiam klausimui, jie gali būti daugialypiai.

Šablono literatūra apsiriboja atvirkštiniais žingsniais:

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

(Pastaba: nesutinku naudoti HTML eilutėse)

Naršyklės palaikymas yra gerai , tačiau galite naudoti transpilerius, kad būtų užtikrintas didesnis suderinamumas.


ES5 originalus atsakymas:

„Javascript“ čia nėra dokumento sintaksės. Tačiau galite atsisakyti naujo laiško:

 "foo \ bar" 
2401
30 апр. atsakymą pateikė Anoniminis 30 balandis. 2009-04-30 05:15 '09 5:15 am. 2009-04-30 05:15

ES6 atnaujinimas:

Kaip minėta pirmame atsakyme, su ES6 / Babel, dabar galite sukurti daugialypės eilutes tiesiog naudodami atgalines nuorodas:

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

Interpoliuojantys kintamieji yra populiari nauja funkcija, kurią sudaro ribotos rūšies eilutės:

 const htmlString = '${user.name} liked your post about strings'; 
border=0

Tai tiesiog atsitraukia:

 user.name + ' liked your post about strings' 

ES5 originalus atsakymas:

„JavaScript“ stiliaus vadove „JavaScript“ rekomenduojama naudoti eilutę, o ne pabėgti eilutes:

Nedarykite to:

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

Kiekvienos linijos pradžioje erdvė negali būti saugiai pašalinta kompiliavimo metu; erdvė po brūkšnio sukels sudėtingas klaidas; ir nors dauguma scenarijų variklių tai palaiko, tai nėra ECMAScript dalis.

Vietoj to naudokite eilutę:

 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.'; 
1138
06 июня '11 в 5:30 2011-06-06 05:30 Atsakymą pateikė Devin G Rhode Birželis 06 '11, 5:30 val. 2011-06-06 05:30

template text = <<"HERE" This Is A Multiline String HERE nėra js (prisimenu, kiek aš jį naudojiau senosiose Perlo dienose).

Jei norite sekti sudėtingas ar ilgas kelių eilučių eilutes, kartais naudoju masyvo modelį:

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

arba jau parodytą anoniminį šabloną (pabėgti nuo naujos linijos), kuris gali būti negražus jūsų kodo blokas:

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

Čia yra dar vienas keistas, tačiau „triukas“ 1 :

 var myString = (function () {}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]; 

išorinis redagavimas: jsfiddle

ES20xx palaiko styginių susiejimą su keliomis eilutėmis, naudojant modelių eilutes :

 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 Pastaba: tai bus prarasta po sumaišymo / užblokavimo kodo

637
30 апр. Atsakymas pateikiamas KooiInc balandžio 30 d 2009-04-30 10:22 '09 10:22 AM 2009-04-30 10:22

Gali būti daugialypės eilutės gryname javascript.

Šis metodas pagrįstas funkcijų serializavimu, kuris apibrėžiamas kaip priklausomas nuo įgyvendinimo . Jis veikia daugelyje naršyklių (žr. Žemiau), tačiau nėra jokių garantijų, kad ji vis dar veiks ateityje, todėl nesitikėkite.

Naudojant šią funkciją:

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

Galite turėti šiuos dokumentus:

 var tennysonQuote = hereDoc(function() {}); 

Metodas buvo sėkmingai išbandytas šiose naršyklėse (nenurodytas = ne išbandytas):

  • IE 4 - 10
  • Opera 9.50 - 12 (ne 9 -)
  • Safari 4 - 6 (ne 3 -)
  • „Chrome“ 1–45
  • „Firefox“ 17 - 21 ( ne 16 - )
  • Rekonq 0,7 - 0,8,0
  • Konqueror nepalaiko 4.7.4

Būkite atsargūs su savo miniatoriumi. Jis linkęs ištrinti komentarus. Kompresoriaus YUI komentarui pradedant }.toString().slice(14,-3) alert(myString)

107
22 марта '13 в 0:05 2013-03-22 00:05 atsakymas buvo pateiktas Luke kovo 13 d. 13 val. 2013-03-22 00:05

Esu nustebęs, kad tai nematau, nes jis veikia bet kur, kur aš jį išbandžiau, ir yra labai naudingas, pavyzdžiui,. šablonai:

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

Ar kas nors žino apie aplinką, kurioje yra HTML, bet jis neveikia?

82
03 янв. Atsakymas Peter V. Mørch 03 Jan 2012-01-03 22:51 '12, 10:51 val. 2012-01-03 22:51

Aš nusprendžiau tai padaryti padarydamas div, todėl ji paslėpta ir kreipėsi į jQuery div id, kai man reikia.

Pavyzdžiui.

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

Tada, kai turiu gauti eilutę, aš tiesiog naudoju šį jQuery:

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

Kuris grąžina mano tekstą keliose eilutėse. Jei skambinu

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

Gaunu:

2019

46
17 авг. Atsakyti Tom Beech Rgp 17 2012-08-17 17:25 „12 at 17:25 pm 2012-08-17 17:25

Naudojant scenarijų žymes:

  • pridėkite <script>...</script> bloką, kuriame yra daugialypis tekstas, į head žymę;
  • gauti daugialypį tekstą, kaip jis yra ... (atkreipkite dėmesį į teksto kodavimą: UTF-8, ASCII)

     <script> // pure javascript var text = document.getElementById("mySoapMessage").innerHTML ; // using JQuery 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
23 авг. jpfreire atsakė 23 rug . 2012-08-23 21:30 '12 21:30 val. 2012-08-23 21:30

Yra keletas būdų, kaip tai pasiekti.

1. Koncentracija

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

2. reguliariai susieti

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

3. Array Join Concatenation

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

Spektaklis, sutapimas (pirmoji) - greičiausias.

Daugiau informacijos apie našumą žr.

Atnaujinti:

Su ES2015, mes galime naudoti šablonų eilutės funkciją. Tai darydami, mes tiesiog turime naudoti atvirkštines erkes, kad sukurtume kelias eilutes.

Pavyzdys:

  `<h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div><label>name: </label>{{hero.name}}</div> ` 
26
26 мая '14 в 12:34 2014-05-26 12:34 atsakymą pateikė Vignešo Subramanietis gegužės 26 d. 14, 12:34 2014-05-26 12:34

Man patinka ši sintaksė ir subtitrai:

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

(bet tikrai negalite traktuoti kaip daugialypės eilutės)

24
13 дек. atsakymas pateikiamas 13 d. 2011-12-13 23:09 '11, 23:09, 2011-12-13 23:09

Čia yra biblioteka, kuri daro jį gražią:

https://github.com/sindresorhus/multiline

Prieš

 var str = '' + '<!doctype html>' + '<html>' + ' <body>' + ' <h1>❤ unicorns</h1>' + ' </body>' + '</html>' + ''; 

Po

 var str = multiline(function(){}); 
17
25 апр. atsakymas duotas mightyiam balandžio 25 d 2014-04-25 14:34 '14, 14:34, 2014-04-25 14:34

Sumažintojai . Šis kodas pateikiamas tik informacijai.

Jis buvo išbandytas „Fx 19“ ir „Chrome“ 24 „Mac“.

Demo

 var new_comment;  // 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')); 
13
17 февр. atsakė mplungjan vasario 17 d. 2013-02-17 12:56 '13, 12:56, 2013-02-17 12:56

Apibendrinant, aš išbandžiau 2 čia pateiktus metodus vartotojo javascript programoje (Opera 11.01):

Todėl rekomenduoju JS Opera naudotojų darbo metodą. Skirtingai nei sakė autorius:

Ji neveikia „Firefox“ ar operoje; tik IE, chromo ir safari.

Jis veikia „Opera 11“. Bent JS vartotojo scenarijuose. Gaila, kad negaliu komentuoti atsakymų į atskirus klausimus ar atsakyti į juos, norėčiau tai padaryti nedelsiant. Jei įmanoma, ką nors, turinčią daugiau privilegijų, prašome tai padaryti už mane.

10
20 мая '11 в 16:10 2011-05-20 16:10 atsakymą Taileris pateikė gegužės 20 d. 11 val. 16:10 2011-05-20 16:10

Atnaujinta iki 2015 m .: Po šešerių metų: dauguma žmonių naudoja modulio krautuvą, o visos pagrindinės modulių sistemos turi būdų įkelti šablonus. Tai nėra įmontuota, bet dažniausiai naudojamas daugialypės eilutės tipas yra šablonai, o šablonai, kaip taisyklė, turėtų būti išsaugoti ne JS .

required.js: "reikalingas tekstas".

Naudojant „ request.js“ „įskiepį“ , naudodami daugialypę šabloną šablone.html

 var template = require('text!template.html') 

NPM / naršyklė: modulis „brfs“

„Browserify“ naudoja „brfs“ modulį tekstiniams failams atsisiųsti. Tai iš tikrųjų sukurs jūsų šabloną jūsų HTML pakete.

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

Lengva

8
10 февр. Mikemaccana atsakymas vasario 10 d. 2014-02-10 14:13 '14 at 14:13 2014-02-10 14:13

Jei norite naudoti pabėgusias eilutes, galite jas naudoti gražiai. Tai atrodo kaip dokumentas su puslapio rėmeliu .

2019

8
28 апр. atsakymas pateikiamas SEO balandžio 28 d. 2015-04-28 21:31 '15, 21:31 2015-04-28 21:31

Jis veikia IE, „Safari“, „Chrome“ ir „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> 
7
23 нояб. atsakymas pateikiamas kompiuterio kompiuteriui 23 lapkritis. 2010-11-23 19:46 '10, 19:46, 2010-11-23 19:46

Galite naudoti „ TypeScript“ („JavaScript SuperSet“), ji palaiko daugialypės eilutės ir verčia į gryną „JavaScript“ be jokių pridėtinių:

 var templates = { myString: `this is a multiline string` } alert(templates.myString); 

Jei norite tai padaryti su paprastu javascript:

 var templates = { myString: function(){}.toString().slice(14,-3) } alert(templates.myString) 

Atminkite, kad „iPad“ / „Safari“ nepalaiko 'functionName.toString()'

Jei turite daug pasenusių kodų, taip pat galite naudoti paprastą „JavaScript“ versiją „TypeScript“ (valymo tikslais):

 interface externTemplates { myString:string; } declare var templates:externTemplates; alert(templates.myString) 

ir galite naudoti daugialypį eilutės objektą iš paprasto javascript versijos, kurioje šablonus įterpiate į kitą failą (kurį galite derinti rinkinyje).

Galite išbandyti typeScript
http://www.typescript>

21 сент. Atsakymą pateikė Stefan Steiger 21 sep. 2015-09-21 18:23 '15, 18:23, 2015-09-21 18:23

„JavaScript“ atitikmuo:

 var text = ` This Is A Multiline String `; 

Čia yra specifikacija . Šio puslapio apačioje žr. Naršyklės palaikymas. Štai keletas pavyzdžių .

7
04 нояб. Atsakymas pateikiamas Lonnie Best 04 lapkričio. 2015-11-04 16:59 '15, 16:59 2015-11-04 16:59

Mano plėtinys yra ngn-wiki.ru.site/questions/660 / .... Jis tikisi komentaro formoje , kur yra simbolis! naudojami siekiant išvengti pašalinimo minifikuojant (bent jau YUI kompresoriui)

 Function.prototype.extractComment = function() { var startComment = ""; var str = this.toString(); var start = str.indexOf(startComment); var end = str.lastIndexOf(endComment); return str.slice(start + startComment.length, -(str.length - end)); }; 

Pavyzdys:

 var tmpl = function() { }.extractComment(); 
7
11 дек. Atsakymas duodamas gruodžio 11 d. 2013-12-11 20:30 „13“ 8:30 val. 2013-12-11 20:30

ES6 leidžia naudoti grįžimo liniją, norėdami nurodyti eilutę keliose eilutėse. Jis buvo vadinamas šablonu. Čia jis yra:

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

Naudojant „Backtick“ darbus „NodeJS“, ją palaiko „Chrome“, „Firefox“, „Edge“, „Safari“ ir „Opera“.

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

5
28 марта '16 в 21:43 2016-03-28 21:43 atsakymas pateikiamas 3- ųjų kovo 16 d., 16 val. 21:43 2016-03-28 21:43

Paprasčiausias būdas sukurti daugialypę eilutes javascrips yra naudoti Atgalinės nuorodos (''). Tai leidžia sukurti kelių eilučių eilutes, į kurias galite įterpti kintamuosius su ${variableName} .

Pavyzdys:

Čia rasite tikslų „Mozilla“ dokumentų suderinamumą. 

3
09 сент. Willem van der Veen atsakė į 09.09. 2018-09-09 14:00 '18, 14:00, 2018-09-09 14:00

Galite naudoti += norite susieti savo eilutę, niekas neatrodo atsakęs į tai, kas bus suprantama ir taip pat tvarkinga ... kažkas panašaus

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

taip pat gali būti parašyta kaip

 var hello = 'hello'; hello += ' world'; hello += ' blah'; console.log(hello); 
3
atsakymas pateikiamas p. 18 янв. Alien Jan 18 2014-01-18 16:18 '14, 16:18, 2014-01-18 16:18

Mano masyvo pagrindu susietos versijos versija:

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

Jis gerai dirbo man, ypač todėl, kad dažnai įterpsiu vertes į html, sukurtą tokiu būdu. Tačiau jis turi daug apribojimų. Įdubos būtų gražios. Nesielgti su įdėtomis citatomis būtų labai malonu, ir tik man tai kelia nerimą.

Ar .push () pridedama prie masyvo, kuris užima daug laiko? Žr. Šį atsakymą:

( Ar yra priežastis, kodėl „JavaScript“ kūrėjai nenaudoja „Array.push“ ()? )

Žvelgiant į šiuos (priešingus) bandymų važiavimus, atrodo, kad .push () yra puiki, kai styginių matricos, kurios mažai tikėtina, kad padidės daugiau nei 100 elementų - vengsiu, kad tai būtų naudinga indeksuojamiems didžiųjų masyvų papildymams.

3
14 окт. Atsakymą KTys pateikia spalio 14 d. 2013-10-14 03:58 '13, 3:58, 2013-10-14 03:58

Pasimėgaukite naudojimu internetu ir nenaudokite ES6 šiam sprendimui. ES6 NĖRA palaikoma visomis kryptimis, pvz., CSS3, o kai kurios naršyklės lėtai prisitaiko prie CSS3 judėjimo. Naudokite paprastą „ol“ javascript, jūsų galutiniai vartotojai dėkoja.

Pavyzdys:

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

3
12 окт. Atsakymas pateikiamas Pragmatiq 12 okt. 2017-10-12 02:28 '17 at 2:28 2017-10-12 02:28

Taip pat atkreipkite dėmesį, kad, plečiant liniją keliose eilutėse, kiekvienos eilutės pabaigoje naudodami grįžtamąjį brūkšnį, bet kokie papildomi simboliai (dažniausiai tarpai, skirtukai ir komentarai pridedami klaidingai) po grįžtamojo krašto sukels netikėtą simbolių klaidą, valandą, kad sužinotumėte

 var string = "line1\ // comment, space or tabs here raise error line2"; 
3
13 июля '16 в 22:25 2016-07-13 22:25 atsakymą pristato Prakash GPz liepos 13 d. 16 d. 22:25 2016-07-13 22:25

Turite naudoti susiejimo operatorių „+“.

 <!DOCTYPE html> <html > 

Naudojant \n , jūsų šaltinio kodas atrodys taip:

 Tai   <br> yra  <br> multilinas  <br> eilutė.

Naudojant „„ “, jūsų naršyklė atrodys taip:

 Tai yra daugialypis eilutė.
2
14 авг. atsakymas pateikiamas Sonevol 14 rug . 2017-08-14 01:57 '17 at 1:57 2017-08-14 01:57

Manau, kad ši problema turėtų būti naudojama „IE“, „Chrome“, „Firefox“, „Safari“, „Opera“

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

Naudokite gryną javascript:

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

Hooray !!

1
28 янв. atsakymą pateikė Aditya Hajare 28 sausio. 2013-01-28 15:20 '13, 15:20, 2013-01-28 15:20

Jei dirbate tik „Node“, galite naudoti fs modulį skaityti daugialypėje eilutėje iš failo:

 var diagram; var fs = require('fs'); fs.readFile( __dirname + '/diagram.txt', function (err, data) { if (err) { throw err; } diagram = data.toString(); }); 
0
09 сент. Charles Brandt atsakymas, rugsėjo 09 d 2014-09-09 03:02 '14 at 3:02 2014-09-09 03:02

Aš tiesiog bandžiau anoniminį atsakymą ir čia suradau nedidelį triuką, jis neveikia, jei po nugaros brūkšnio yra tarpas.
Taigi šis sprendimas neveikia -

 var x = { test:'<?xml version="1.0"?>\ <-- One space here <?mso-application progid="Excel.Sheet"?>' }; 

Bet kai erdvė yra pašalinta, ji veikia -

 var x = { test:'<?xml version="1.0"?>\<-- No space here now <?mso-application progid="Excel.Sheet"?>' }; alert(x.test);​ 

Tikiuosi, kad tai padės!

0
23 нояб. Atsakymą pateikė Anmol Saraf lapkričio 23 d. 2012-11-23 16:10 „12 at 4:10 pm 2012-11-23 16:10
  • 1
  • 2