सवाल जावास्क्रिप्ट में मल्टीलाइन स्ट्रिंग बनाना


मेरे पास रूबी में निम्न कोड है। मैं इस कोड को जावास्क्रिप्ट में बदलना चाहता हूं। जेएस में समकक्ष कोड क्या है?

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

1924
2018-04-30 02:11


मूल


देख stackoverflow.com/a/6247331/632951 - Pacerier
इसे प्राप्त करने के विभिन्न तरीकों से इसे देखें। मैंने प्रत्येक विधि का प्रदर्शन भी जोड़ा है stackoverflow.com/a/23867090/848841 - Vignesh Subramanian


जवाब:


अद्यतन करें:

ईसीएमएस्क्रिप्ट 6 (ईएस 6) एक नए प्रकार के शाब्दिक अर्थात्, अर्थात् प्रस्तुत करता है टेम्पलेट अक्षर। उनके पास कई विशेषताएं हैं, दूसरों के बीच परिवर्तनीय इंटरपोलेशन, लेकिन सबसे महत्वपूर्ण बात यह है कि वे बहुमुखी हो सकते हैं।

एक टेम्पलेट शाब्दिक द्वारा सीमित है बैकटिक:

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

(नोट: मैं तारों में एचटीएमएल का उपयोग करने की वकालत नहीं कर रहा हूं)

ब्राउज़र समर्थन ठीक है, लेकिन आप इसका उपयोग कर सकते हैं transpilers अधिक संगत होने के लिए।


मूल ES5 उत्तर:

जावास्क्रिप्ट में यहां दस्तावेज़-दस्तावेज़ वाक्यविन्यास नहीं है। आप शाब्दिक न्यूलाइन से बच सकते हैं, हालांकि, जो करीब आता है:

"foo \
bar"

2303
2018-04-30 02:15



चेतावनी दी जानी चाहिए: कुछ ब्राउज़र निरंतरता पर न्यूलाइन डालेंगे, कुछ नहीं करेंगे। - staticsan
विजुअल स्टूडियो 2010 को इस वाक्यविन्यास से भी भ्रमित लगता है। - jcollum
dresende: यह कोड की दो पंक्तियां है। यह एक अभिव्यक्ति है। - Anonymous
@Nate यह निर्दिष्ट है ईसीएमए -262 5 वां संस्करण धारा 7.8.4 और बुलाया LineContinuation : "एक पंक्ति टर्मिनेटर वर्ण एक स्ट्रिंग अक्षर में प्रकट नहीं हो सकता है, ए के हिस्से को छोड़कर LineContinuation खाली चरित्र अनुक्रम का उत्पादन करने के लिए। एक लाइन टर्मिनेटर चरित्र को स्ट्रिंग अक्षर के स्ट्रिंग मान का हिस्सा बनने का सही तरीका है \ n या \ u000A जैसे बचने के अनुक्रम का उपयोग करना। " - some
मैं नहीं देखता कि ब्राउज़र ऐसा असंगत तरीके से क्यों करते हैं जब आप ऐसा करेंगे। "लाइन 1 \ n" + "लाइन 2" कई लाइनों में पर्याप्त पठनीय है और आपको लगातार व्यवहार की गारंटी है। - SamStephens


अद्यतन करें:

जैसा कि पहले उत्तर का उल्लेख है, ES6 / Babel के साथ, अब आप बैकटिक्स का उपयोग करके बहु-लाइन स्ट्रिंग बना सकते हैं:

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

इंटरपोलिंग चर एक लोकप्रिय नई सुविधा है जो बैक-टिक सीमित तारों के साथ आता है:

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

यह सिर्फ concatenation के लिए पारदर्शी:

user.name + ' liked your post about strings'

मूल ES5 उत्तर:

Google की जावास्क्रिप्ट शैली मार्गदर्शिका न्यूलाइन से बचने के बजाय स्ट्रिंग कॉन्सटेनेशन का उपयोग करने की सिफारिश करता है:

यह मत करो:

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

प्रत्येक रेखा की शुरुआत में व्हाइटस्पेस संकलन समय पर सुरक्षित रूप से छीन नहीं सकता है; स्लैश के बाद व्हाइटस्पेस के परिणामस्वरूप मुश्किल त्रुटियां होंगी; और जबकि अधिकांश स्क्रिप्ट इंजन इसका समर्थन करते हैं, यह ईसीएमएस्क्रिप्ट का हिस्सा नहीं है।

इसके बजाय स्ट्रिंग concatenation का उपयोग करें:

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

1120
2018-06-06 02:30



यह प्रायोगिक जावास्क्रिप्ट को सक्षम करने के बाद भी खिड़कियों के लिए कैनरी क्रोम में मेरे लिए काम नहीं करता है - Inuart
मैं Google की सिफारिश को समझ नहीं पा रहा हूं। बेहद पुराने लोगों को छोड़कर सभी ब्राउज़र्स बैकस्लैश का समर्थन करते हैं, इसके बाद न्यूलाइन दृष्टिकोण होता है, और भविष्य में पिछड़े संगतता के लिए ऐसा करना जारी रखेगा। केवल एक बार आपको इससे बचने की आवश्यकता होगी यदि आपको यह सुनिश्चित करने की आवश्यकता है कि प्रत्येक पंक्ति के अंत में एक और केवल एक नई लाइन (या कोई नई लाइन) नहीं जोड़ा गया है (स्वीकृत उत्तर पर भी मेरी टिप्पणी देखें)। - Matt Browne
जो लोग इन सामानों को आजमा सकते हैं, उन्हें जांचें [क्रोम कैनरी] [1] [1]: google.com/intl/en/chrome/browser/canary.html - Sazid
ध्यान दें कि टेम्पलेट स्ट्रिंग IE11, फ़ायरफ़ॉक्स 31, क्रोम 35, या सफारी 7 में समर्थित नहीं हैं। देखें kangax.github.io/compat-table/es6 - Dwayne
@MattBrowne कारणों के महत्व के लिए Google की सिफारिश पहले ही उनके द्वारा प्रलेखित की गई है: (1) प्रत्येक पंक्ति की शुरुआत में व्हाइटस्पेस [उदाहरण में, आप अपनी स्ट्रिंग में व्हाइटस्पेस नहीं चाहते हैं लेकिन यह कोड में अच्छा दिखता है ] (2) स्लैश के बाद व्हाइटस्पेस के परिणामस्वरूप मुश्किल त्रुटियां हो सकती हैं [यदि आप एक लाइन को समाप्त करते हैं \  `` `नोटिस करना मुश्किल है] और (3) जबकि अधिकांश स्क्रिप्ट इंजन इसका समर्थन करते हैं, यह ईसीएमएस्क्रिप्ट का हिस्सा नहीं है [यानी। गैर मानक सुविधाओं का उपयोग क्यों करें?] याद रखें कि यह एक स्टाइल गाइड है, जो कोड को पढ़ने में आसान बनाने के बारे में है + बनाए रखना + डीबग: न केवल "यह काम करता है" सही है। - ShreevatsaR


पैटर्न text = <<"HERE" This Is A Multiline String HERE जेएस में उपलब्ध नहीं है (मुझे अपने पुराने पुराने पर्ल दिनों में इसका उपयोग करना याद है)।

जटिल या लंबे मल्टीलाइन तारों के साथ निरीक्षण रखने के लिए मैं कभी-कभी एक सरणी पैटर्न का उपयोग करता हूं:

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

या पैटर्न पहले से ही दिखाया गया है (न्यूलाइन से बचें), जो आपके कोड में एक बदसूरत ब्लॉक हो सकता है:

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

यहां एक और अजीब है लेकिन 'चाल' काम कर रहा है1:

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

बाहरी संपादन: jsfiddle

[अतिरिक्त 2015]
ES6 एकाधिक लाइनों पर स्ट्रिंग्स स्ट्रिंग का समर्थन करता है टेम्पलेट तार:

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 नोट: यह आपके कोड को खनन / obfuscating के बाद खो जाएगा


634
2018-04-30 07:22



सरणी पैटर्न का प्रयोग न करें। ज्यादातर मामलों में यह सादे पुराने स्ट्रिंग कॉन्सटेनेशन से धीमा होगा। - BMiner
वास्तव में? jsperf.com/join-concat/24 - KooiInc
सरणी पैटर्न अधिक पठनीय है और एक आवेदन के लिए प्रदर्शन हानि अक्सर नगण्य है। चूंकि उस परफ टेस्ट से पता चलता है कि आईई 7 भी प्रति सेकंड हजारों ऑपरेशन कर सकता है। - Ben Atkin
एक सुरुचिपूर्ण विकल्प के लिए +1 जो न केवल सभी ब्राउज़रों में समान तरीके से काम करता है, बल्कि भविष्य-सबूत भी है। - Pavel
@KooiInc आपके परीक्षण पहले से बनाए गए सरणी के साथ शुरू होते हैं, जो परिणामों को छोड़ देता है। यदि आप सरणी के प्रारंभिकरण को जोड़ते हैं, तो सीधे संयोजन तेजी से होता है jsperf.com/string-concat-without-sringbuilder/7 देख stackoverflow.com/questions/51185/... न्यूलाइन के लिए एक चाल के रूप में, यह ठीक हो सकता है, लेकिन यह निश्चित रूप से इससे अधिक काम कर रहा है - Juan Mendes


आप कर सकते हैं शुद्ध जावास्क्रिप्ट में multiline तार है।

यह विधि फ़ंक्शंस के क्रमिकरण पर आधारित है, जो है कार्यान्वयन-निर्भर होने के लिए परिभाषित किया गया है। यह अधिकांश ब्राउज़रों में काम करता है (नीचे देखें), लेकिन इस बात की कोई गारंटी नहीं है कि यह अभी भी भविष्य में काम करेगा, इसलिए इस पर भरोसा न करें।

निम्नलिखित फ़ंक्शन का उपयोग करना:

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

आपके पास इस तरह के दस्तावेज हो सकते हैं:

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

निम्नलिखित ब्राउज़रों में विधि का सफलतापूर्वक परीक्षण किया गया है (उल्लेख नहीं किया गया = परीक्षण नहीं किया गया है):

  • आईई 4 - 10
  • ओपेरा 9.50 - 12 (9- में नहीं)
  • सफारी 4-6 (3- में नहीं)
  • क्रोम 1 - 45
  • फ़ायरफ़ॉक्स 17 - 21 (16-)
  • Rekonq 0.7.0 - 0.8.0
  • Konqueror 4.7.4 में समर्थित नहीं है

हालांकि, अपने minifier के साथ सावधान रहें। यह टिप्पणियों को हटाने के लिए जाता है। के लिए यूयूआई कंप्रेसर, एक टिप्पणी से शुरू हो रहा है /*!(जैसे मैंने इस्तेमाल किया) संरक्षित किया जाएगा।

मुझे लगता है ए असली समाधान का उपयोग करना होगा CoffeeScript


327
2018-04-06 18:16



+ 1 + 1 चालाक! (नोड.जेएस में काम करता है) - George Bailey
क्या!? एक multiline स्ट्रिंग होने में एक multiline टिप्पणी हैक करने के लिए एक समारोह बनाने और decompiling? अभी व कि बदसूरत। - fforw
यह वास्तव में है परे बदसूरत ... हालांकि, नहीं है decompiling शामिल ... - Jordão
jsfiddle.net/fqpwf क्रोम 13 और आईई 8/9 में काम करता है, लेकिन एफएफ 6 नहीं। मुझे यह कहने से नफरत है, लेकिन मुझे यह पसंद है, और यदि यह प्रत्येक ब्राउज़र की जानबूझकर विशेषता हो सकती है (ताकि वह गायब न हो), तो मैं इसका इस्तेमाल करूंगा। - Jason Kleban
बेहद आसान मैं इसे (जैस्मीन) यूनिट परीक्षणों के लिए उपयोग कर रहा हूं, लेकिन इसे उत्पादन कोड के लिए टालना चाहता हूं। - Jason


तुम यह केर सकते हो...

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

187
2018-03-21 21:05



पहला उदाहरण महान और सरल है। \ दृष्टिकोण से काफी बेहतर है क्योंकि मुझे यकीन नहीं है कि ब्राउजर बैकस्लैश को बचने वाले चरित्र के रूप में और बहु-पंक्ति चरित्र के रूप में कैसे संभालेगा। - Matt K
सीडीएटीए कोड (ई 4 एक्स) है अप्रचलित और जल्द ही फ़ायरफ़ॉक्स में भी काम करना बंद कर देगा। - Brock Adams
e4x.js भविष्य का सबूत समाधान होगा - Paul Sweatte


मैं एक बहु लाइन वाली स्ट्रिंग की इस बहुत ही बदसूरत विधि के साथ आया था। चूंकि किसी फ़ंक्शन को किसी स्ट्रिंग में कनवर्ट करने से फ़ंक्शन के अंदर कोई भी टिप्पणी लौटाती है, तो आप बहुभाषी टिप्पणी / ** / का उपयोग करके अपनी स्ट्रिंग के रूप में टिप्पणियों का उपयोग कर सकते हैं। आपको बस सिरों को ट्रिम करना होगा और आपके पास स्ट्रिंग होगी।

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



यह बिल्कुल डरावना है। मुझे यह पसंद है (हालांकि आपको रेगेक्स मैच करने की आवश्यकता हो सकती है क्योंकि मुझे यकीन नहीं है कि व्हाइटस्पेस कितना सटीक है toString() है। - Kevin Cox
stackoverflow.com/a/5571069/499214 - John Dvorak
यह समाधान फ़ायरफ़ॉक्स में काम नहीं कर रहा है, शायद यह ब्राउज़र के लिए एक सुरक्षा सुविधा है? संपादित करें: कभी नहीं, यह केवल फ़ायरफ़ॉक्स संस्करण 16 के लिए काम नहीं करता है। - Bill
उन minifiers से सावधान रहें जो टिप्पणी पट्टी ...: डी - jondavidjohn
@ केविनकॉक्स आप उपयोग कर सकते हैं trim()। - schmijos


मुझे आश्चर्य है कि मैंने यह नहीं देखा, क्योंकि यह हर जगह काम करता है मैंने इसका परीक्षण किया है और उदाहरण के लिए बहुत उपयोगी है टेम्पलेट्स:

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

क्या कोई ऐसे वातावरण के बारे में जानता है जहां HTML है लेकिन यह काम नहीं करता है?


82
2017-08-17 14:25



कहीं भी आप अपने तारों को अलग और दूरस्थ स्क्रिप्ट तत्वों में रखना नहीं चाहते हैं। - Lodewijk
एक वैध आपत्ति! यह सही नहीं है। लेकिन टेम्पलेट्स के लिए, यह अलगाव केवल ठीक नहीं है, बल्कि शायद प्रोत्साहित भी किया जाता है। - Peter V. Mørch
मैं 80/120 वर्णों में मल्टीलाइन में सबकुछ विभाजित करना पसंद करता हूं, मुझे डर है कि सिर्फ टेम्पलेट्स से अधिक है। अब मैं 'लाइन 1' + 'लाइन 2' वाक्यविन्यास पसंद करता हूं। यह भी सबसे तेज़ है (हालांकि यह वास्तव में बड़े ग्रंथों के लिए प्रतिद्वंद्वी हो सकता है)। हालांकि यह एक अच्छी चाल है। - Lodewijk
वास्तव में, यह HTML जावास्क्रिप्ट नहीं है: - / - CpILL
हालांकि, जावास्क्रिप्ट में एक मल्टीलाइन स्ट्रिंग प्राप्त करने का कार्य इस तरह से किया जा सकता है - Davi Fiamenghi