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


2610

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

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


इसे प्राप्त करने के लिए विभिन्न तरीकों पर जाँच करें। मैंने प्रत्येक विधि का प्रदर्शन भी जोड़ दिया है stackoverflow.com/a/23867090/848841
विग्नेश सुब्रमण्यन

जवाबों:


3314

अपडेट करें:

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

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

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

(नोट: मैं स्ट्रिंग्स में HTML का उपयोग करने की वकालत नहीं कर रहा हूं)

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


मूल ES5 उत्तर:

जावास्क्रिप्ट यहाँ एक दस्तावेज़ वाक्यविन्यास नहीं है। आप शाब्दिक नई रेखा से बच सकते हैं, हालांकि, जो करीब आती है:

"foo \
bar"

231
सावधान रहें: कुछ ब्राउज़र निरंतरता पर नई सुचनाएँ डालेंगे, कुछ नहीं।
स्टेटिक्सन

35
दृश्य स्टूडियो 2010 इस सिंटैक्स द्वारा भी भ्रमित होने लगता है।
जौलम

47
@Nate यह में निर्दिष्ट किया जाता ECMA-262 5 वें संस्करण के खंड 7.8.4 और कहा जाता LineContinuation : "एक लाइन टर्मिनेटर चरित्र, एक स्ट्रिंग शाब्दिक में प्रकट नहीं कर सकते हैं एक के भाग को छोड़कर LineContinuation खाली चरित्र अनुक्रम का निर्माण करने के कारण एक करने का सही तरीका। एक स्ट्रिंग शाब्दिक के स्ट्रिंग मूल्य का हिस्सा बनने के लिए लाइन टर्मिनेटर चरित्र \ n या u000A जैसे भागने के क्रम का उपयोग करना है। "
कुछ

16
मैं यह नहीं देखता कि जब ब्राउज़र असंगत व्यवहार करते हैं तो आप ऐसा क्यों करेंगे। कई लाइनों में "लाइन 1 \ n" + "लाइन 2" पर्याप्त पढ़ने योग्य है और आपको लगातार व्यवहार की गारंटी है।
सैमस्टीफेंस

11
"ब्राउज़र समर्थन ठीक है" ... IE11 द्वारा समर्थित नहीं
टॉम एंड्रासज़ेक

1317

ES6 अपडेट:

पहले उत्तर के रूप में, ES6 / बैबेल के साथ, आप अब केवल बैकटिक्स का उपयोग करके मल्टी-लाइन स्ट्रिंग्स बना सकते हैं:

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

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

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

यह बस संघनन के लिए नीचे स्थानांतरित करता है:

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

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

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

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

19
मुझे Google की अनुशंसा समझ में नहीं आ रही है। अत्यंत पुराने को छोड़कर सभी ब्राउज़र बैकलाइन को न्यूलाइन अप्रोच का समर्थन करते हैं, और भविष्य में बैकवर्ड संगतता के लिए ऐसा करना जारी रखेंगे। यदि आपको यह सुनिश्चित करने की आवश्यकता है कि केवल समय की आवश्यकता है, तो यह सुनिश्चित करने के लिए कि प्रत्येक पंक्ति के अंत में केवल एक और केवल एक नई पंक्ति (या कोई नई पंक्ति) नहीं जोड़ी गई है (स्वीकृत उत्तर पर मेरी टिप्पणी भी देखें)।
मैट ब्राउन

6
ध्यान दें कि टेम्पलेट स्ट्रिंग्स IE11, फ़ायरफ़ॉक्स 31, क्रोम 35 या सफारी 7 में समर्थित नहीं हैं। देखें kangax.github.io/compat-table/es6
EricP

29
@MattBrowne Google की अनुशंसा पहले से ही उनके द्वारा दस्तावेजित है, कारणों के महत्व के क्रम में: (1) प्रत्येक पंक्ति की शुरुआत में व्हाट्सएप [उदाहरण में, आप नहीं चाहते कि व्हाट्सएप आपके तार में हो लेकिन कोड में अच्छे से हो। ] (2) व्हाट्सएप के बाद स्लैश में त्रुटिपूर्ण त्रुटियां होंगी [अगर आप एक लाइन को समाप्त \ करने के बजाय `\ _ के बजाय यह नोटिस करना कठिन है] और (3) जबकि अधिकांश स्क्रिप्ट इंजन इसका समर्थन करते हैं, यह ECMAScript का हिस्सा नहीं है [क्यों] गैरमानक सुविधाओं का उपयोग करें?] याद रखें कि यह एक स्टाइल गाइड है, जो कोड को पढ़ने + बनाए रखने के लिए आसान बनाने के बारे में है + डिबग: न केवल "यह काम करता है" सही।
श्रीवत्सआर

1
आश्चर्यजनक है कि इन सभी वर्षों के बाद भी इस के साथ जाने के लिए सबसे अच्छा / सबसे सुरक्षित / सबसे अच्छा तरीका है। टेम्पलेट शाब्दिक (उत्तर के ऊपर) IE में काम नहीं करता है और लाइनों से बचना सिर्फ एक गड़बड़ है जिसे आप जल्द ही पछता रहे हैं
टियागो डुटर्ट

1
यह पता चला है कि एंड्रॉइड के पुराने संस्करण बैकटिक्स का समर्थन नहीं करते हैं, इसलिए यदि आपके पास एक एंड्रॉइड ऐप है जिसका उपयोग करके वेबवेब आपके बैकटिक्स का कारण बनता है तो आपका ऐप नहीं चलता है!
माइकल ज्वर

684

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

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

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

ES20xx टेम्पलेट स्ट्रिंग्स का उपयोग करके कई लाइनों पर फैले तारों का समर्थन करता है :

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


34
कृपया सरणी पैटर्न का उपयोग न करें। यह ज्यादातर मामलों में सादे-पुराने स्ट्रिंग संगति की तुलना में धीमा होगा।
बीएमएनर

73
सरणी पैटर्न अधिक पठनीय है और किसी अनुप्रयोग के लिए प्रदर्शन हानि अक्सर नगण्य होती है। जैसा कि पूर्ण परीक्षण दिखाता है, यहां तक ​​कि IE7 प्रति सेकंड हजारों ऑपरेशन भी कर सकता है।
बेंजामिन एटकिन

19
एक सुरुचिपूर्ण विकल्प के लिए +1 जो न केवल सभी ब्राउज़रों में समान रूप से काम करता है, बल्कि भविष्य के प्रमाण भी है।
पावेल

26
@KooiInc आपके परीक्षण पहले से बनाए गए सरणी से शुरू होते हैं, जो परिणामों को रोकते हैं। यदि आप ऐरे के आरंभीकरण को जोड़ते हैं, तो सीधे कॉन्सेप्टेशन तेज होता है jsperf.com/string-concat-without-sring ओलिंपिक/7 देखें stackoverflow.com/questions/51185/… नई सुर्खियों में एक ट्रिक के रूप में, यह ठीक हो सकता है, लेकिन यह निश्चित रूप से है इससे ज्यादा काम करना चाहिए
जुआन मेंडेस

9
@ बीएमएनआर: 1) "समयपूर्व अनुकूलन सभी बुराई की जड़ है" - डोनाल्ड नथ, और 2) 'पठनीयता' देखने वाले की नजर में है
पॉल बेनेट

348

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

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

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

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
*/});

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

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

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

मुझे लगता है कि कॉफीस्क्रिप्ट का उपयोग करने के लिए एक वास्तविक समाधान होगा ।

ES6 अद्यतन: आप एक टिप्पणी के साथ एक समारोह बनाने और टिप्पणी पर चलने के बजाय backtick का उपयोग कर सकते हैं। रेगेक्स को केवल स्ट्रिप स्पेस में अपडेट करने की आवश्यकता होगी। ऐसा करने के लिए आपके पास एक स्ट्रिंग प्रोटोटाइप विधि भी हो सकती है:

let foo = `
  bar loves cake
  baz loves beer
  beer loves people
`.removeIndentation()

जो शांत हो जाएगा। किसी को यह लिखना चाहिए।


232
क्या!? एक बहुस्तरीय स्ट्रिंग होने के लिए एक बहु-भाषी टिप्पणी को हैक करने के लिए एक फंक्शन बनाना और डिकम्पोज करना? अब वह बदसूरत है।
fforw

4
jsfiddle.net/fqpwf Chrome 13 और IE8 / 9 में काम करता है, लेकिन FF6 नहीं। मुझे यह कहने से नफरत है, लेकिन मुझे यह पसंद है, और अगर यह प्रत्येक ब्राउज़र की एक जानबूझकर विशेषता हो सकती है (ताकि यह गायब न हो), मैं इसका उपयोग करूंगा।
जेसन क्लबन सिप

2
@ uos it: इसके लिए जानबूझकर, यह कल्पना में होना चाहिए; या इतने व्यापक रूप से उपयोग किया जाता है, कि ब्राउज़र निर्माता इस "आकस्मिक" सुविधा को हटाना नहीं चाहेंगे। हालांकि प्रयोगों के लिए धन्यवाद ... कुछ कॉफ़ीस्क्रिप्ट आज़माएं।
जोर्डो

1
a.toString ()। सबस्ट्रिंग (15, a.toString ()। लंबाई -4) भी काम करता है, और इसे पूरे स्ट्रिंग को स्कैन करने की आवश्यकता नहीं है (हालांकि यह सबसे अधिक संभावना है और गणना इसे वैसे भी एक और स्कैन बनाती है। ओह स्वागत है। ।)
Lodewijk

2
बेहद काम। मैं इसे (जैस्मीन) यूनिट परीक्षणों के लिए उपयोग कर रहा हूं, लेकिन उत्पादन कोड के लिए इसे टाल रहा हूं।
जेसन

207

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

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

पहला उदाहरण महान और सरल है। जितना मुझे यकीन नहीं है कि दृष्टिकोण से बेहतर है कि ब्राउजर बैकस्लैश को एस्केप कैरेक्टर के रूप में और मल्टी-लाइन कैरेक्टर के रूप में कैसे हैंडल करेगा।
मैट के


e4x.js अच्छा भविष्य प्रूफ समाधान होगा
पॉल स्वेट्टे

139

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

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)

37
यह बिल्कुल भयानक है। मुझे यह पसंद है (हालाँकि आपको रेगेक्स मैच करने की आवश्यकता हो सकती है क्योंकि मुझे यकीन नहीं है कि व्हॉट्सएप कितना सटीक toString()है।
केविन कॉक्स

यह समाधान फ़ायरफ़ॉक्स में काम नहीं करता है, शायद यह ब्राउज़र के लिए एक सुरक्षा विशेषता है? संपादित करें: कोई बात नहीं, यह केवल फ़ायरफ़ॉक्स संस्करण 16 के लिए काम नहीं करता है।
बिल सॉफ्टवेयर इंजीनियर

45
उन खनिकों से भी सावधान रहें जो टिप्पणी करते हैं ...: D
jondavidjohn

3
यही कारण है कि हम अच्छी चीजें नहीं कर सकते हैं।
डेनिलो एम। ओलिवेरा

4
आप जावास्क्रिप्ट भूमि में कुछ अजीब सामान कर सकते हैं। हालांकि सभी ईमानदारी में, आपको इसका उपयोग कभी नहीं करना चाहिए।
ल्यूक

88

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

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

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


23
कहीं भी आप अपने तार को अलग और दूर के लिपि तत्वों में नहीं डालना चाहते हैं।
लोदीविज्क

9
एक वैध आपत्ति! यह सही नहीं है। लेकिन टेम्पलेट्स के लिए, यह अलगाव न केवल ठीक है, बल्कि शायद प्रोत्साहित भी किया गया है।
पीटर वी। मॉर्क

1
मैं मल्टीलाइन में 80/120 वर्णों में सब कुछ विभाजित करना पसंद करता हूं, मुझे डर है कि यह सिर्फ टेम्पलेट्स से अधिक है। अब मैं 'लाइन 1' + 'लाइन 2' वाक्य रचना पसंद करता हूं। यह सबसे तेज़ है (हालांकि यह वास्तव में बड़े ग्रंथों के लिए इसे प्रतिद्वंद्वी कर सकता है)। हालांकि यह एक अच्छी चाल है।
Lodewijk

27
वास्तव में, यह HTML नहीं जावास्क्रिप्ट है: - /
CpILL

5
हालाँकि, जावास्क्रिप्ट में एक
मल्टीलाइन

52

मैंने इसे डिव्यू आउटपुट करके, इसे छिपाकर बनाया है, और जब जरूरत पड़ी तो jQuery द्वारा डिव आईडी को कॉल किया।

जैसे

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

फिर जब मुझे स्ट्रिंग प्राप्त करने की आवश्यकता होती है, तो मैं बस निम्नलिखित jQuery का उपयोग करता हूं:

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

जो कई लाइनों पर मेरा पाठ लौटाता है। अगर मैं बुलाऊं

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

मुझे मिला:

यहां छवि विवरण दर्ज करें


2
इसके लिए धन्यवाद! यह एकमात्र ऐसा उत्तर है जो मैंने पाया है कि मेरी समस्या को हल करता है, जिसमें अज्ञात तार शामिल होते हैं जिसमें एकल और दोहरे उद्धरणों का कोई भी संयोजन हो सकता है जो सीधे कोड में पूर्व-एन्कोडिंग के लिए कोई अवसर नहीं डाला जाता है। (यह एक टेम्प्लेटिंग लैंग्वेज से आ रहा है जो JS को बनाता है - फिर भी एक विश्वसनीय स्रोत से है और एक फॉर्म सबमिशन नहीं है, इसलिए यह पूरी तरह से अलग नहीं है)।
अष्टकवर्ग

यह एकमात्र तरीका था जो वास्तव में मेरे लिए जावा स्ट्रिंग से एक बहु-पंक्ति जावास्क्रिप्ट स्ट्रिंग चर बनाने के लिए काम करता था।
beginner_

4
यदि स्ट्रिंग HTML है तो क्या होगा?
डेन डैस्कलेस्कु

4
$ ('# यूनिकआईडी')। सामग्री ()
mplungjan

1
@ स्पेसर ने Google, साथ ही अन्य साइटों से जो कुछ भी पढ़ा है, वह कहता है कि आजकल Google इंडेक्स display:noneकंटेंट करता है, सबसे अधिक संभावना जावास्क्रिप्ट-स्टाइल फ्रंट-एंड की लोकप्रियता के कारण है। (उदाहरण के लिए, छुपाने / दिखाने की कार्यक्षमता वाला एक FAQ पृष्ठ।) हालांकि आपको सावधान रहने की आवश्यकता है, क्योंकि Google कहता है कि वे आपको दंडित कर सकते हैं यदि छिपी हुई सामग्री आपकी SEO रैंकिंग को कृत्रिम रूप से बढ़ाने के लिए डिज़ाइन की गई प्रतीत होती है।
गैविन

31

इसे प्राप्त करने के कई तरीके हैं

1. स्लैश समागम

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

2. नियमित रूप से संघनन

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

3. ऐरे से जुड़ें

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

प्रदर्शन के लिहाज से स्लैश कॉन्टेक्टेशन (पहले वाला) सबसे तेज है।

देखें इस परीक्षण का मामला प्रदर्शन के बारे में अधिक जानकारी के लिए

अपडेट करें:

ES2015 के साथ , हम इसके टेम्पलेट स्ट्रिंग्स फीचर का लाभ उठा सकते हैं। इसके साथ, हमें बस मल्टी लाइन स्ट्रिंग्स बनाने के लिए बैक-टिक्स का उपयोग करने की आवश्यकता है

उदाहरण:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

11
मुझे लगता है कि आपने अभी पांच साल के लिए पृष्ठ पर पहले से ही दर्ज किया है, लेकिन एक स्वच्छ तरीके से।
रैंडमइन्सानो

लाइनों के शुरू में व्हाट्सएप को भी शामिल नहीं किया जाएगा?
f.khantsis

29

स्क्रिप्ट टैग का उपयोग करना:

  • टैग <script>...</script>में अपने बहु-पाठ वाले ब्लॉक को जोड़ें head;
  • अपना बहु-पाठ प्राप्त करें ... (टेक्स्ट एन्कोडिंग के लिए देखें: 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>

मुझे लगता है कि यह रणनीति साफ सुथरी है और अभी तक इसका दुरुपयोग हुआ है। jsrender इसका उपयोग करता है।
xdhmoore

मैं इसका उपयोग कर रहा हूँ इनटॉक्स iso इनर HTML के साथ, लेकिन मैं यह कैसे सुनिश्चित करूँ कि व्हॉट्सएप संरक्षित हैं?
डेविड नूल्स

यदि आप उनका उपयोग कर रहे हैं, तो भी अजाक्स क्वेरी। आप अपने हेडर को बदलने की कोशिश कर सकते हैं xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");मुझे याद नहीं है कि जेएस में टिप्पणियों को गलत करने के अलावा अन्य समस्याएं हैं। रिक्त स्थान जहां कोई समस्या नहीं है।
jpfreire

24

मुझे यह वाक्यविन्यास और अभद्रता पसंद है:

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

(लेकिन वास्तव में इसे बहुस्तरीय स्ट्रिंग नहीं माना जा सकता है)


3
मैं इसका उपयोग करता हूं, सिवाय इसके कि मैंने पूर्ववर्ती पंक्ति के अंत में '+' डाला, यह स्पष्ट करने के लिए कि कथन अगली पंक्ति पर जारी है। आपका तरीका अधिक समान रूप से इंडेंट को लाइन अप करता है।
सीन

@ सीन मैं भी इस का उपयोग करें, और मैं अभी भी प्रत्येक नई लाइन की शुरुआत में '+' डाल पसंद करते हैं, और अंतिम ''; एक नई लाइन पर, cuz i ने इसे और 'सही' पाया।
एग्लेसिनेस

7
शुरुआत में + डालने से कोई भी उस पंक्ति को उस दूसरी पंक्ति को संपादित करने की अनुमति देता है जब वह अनुक्रम की पहली / अंतिम पंक्ति होती है।
मौलीद

3
मैं आगे भी + को पसंद करता हूं क्योंकि नेत्रहीन को मुझे यह जानने के लिए लाइन के अंत तक स्कैन करने की आवश्यकता नहीं है कि अगले एक निरंतरता है।
डेनियल सोकोलोव्स्की

18

यह लाइब्रेरी है जो इसे सुंदर बनाती है:

https://github.com/sindresorhus/multiline

इससे पहले

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

उपरांत

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

1
nodejsब्राउज़र में उपयोग करने में यह समर्थन अवश्यम्भावी है।
ह्यूई टैन

3
@HueiTan डॉक्स स्थिति यह ब्राउज़र में भी काम करती है। जो समझ में आता है - यह सिर्फ है Function.prototype.String()
मिकमेकाना

हां, लेकिन यह कहा गया "जबकि यह ब्राउज़र में ठीक काम करता है, यह मुख्य रूप से Node.js. में उपयोग करने के लिए है अपने जोखिम पर। यह ब्राउज़र में ठीक काम करता है, यह मुख्य रूप से Node.js. उपयोग में उपयोग के लिए है अपनी जिम्मेदारी पर।" (जस्ट बीअरफुल एक्सडी)
ह्यूई टैन

@HueiTanYep मैंने वह हिस्सा पढ़ा। लेकिन Function.prototype.toString () बहुत स्थिर और प्रसिद्ध है।
मीकाकसाना

1
मेरे लिए सबसे अच्छा जवाब है क्योंकि यह कम से कम मध्य में सभी बकवास के बिना बहुस्तरीय प्राप्त करता है (शुरुआत और अंत में मैं इससे निपट सकता हूं)।
डेमियन गोल्डिंग

14

डाउनवोटर्स : यह कोड केवल सूचना के लिए दिया जाता है।

यह मैक पर एफएक्स 19 और क्रोम 24 में परीक्षण किया गया है

डेमो

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> ago
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');
<ul></ul>


13
वह भयावह है। +1। और आप getElement के बजाय document.currentScript का उपयोग कर सकते हैं ...
Orwellophile

1
अपरिभाषित "आप"
ऑक्स के

1
jsfiddle-fixed - मेरे कंसोल में विश्व स्तर पर "आप" परिभाषित होना चाहिए था। अब काम करता है (क्रोम / ओएसएक्स)। टिप्पणी को एक var में जोड़ने के बारे में अच्छी बात यह है कि आप फ़ंक्शन संदर्भ में नहीं हैं, jsfiddle-function-heredoc हालांकि फ़ंक्शन विधि क्लास के तरीकों के लिए शांत होगी। बेहतर हो सकता है कि इसे एक रिप्लेस {{::} ऑब्जेक्ट एनीवेज। मज़ा वैसे भी पागल कुछ पुश करने के लिए सीमित करने के :)
Orwellophile

1
नफरत करने वालों को भूल जाओ। यह एकमात्र सही उत्तर बार ES6 है। अन्य सभी उत्तरों में समाकलन, किसी प्रकार की गणना या भागने की आवश्यकता होती है। यह वास्तव में बहुत अच्छा है और मैं इसे एक ऐसे खेल में प्रलेखन जोड़ने के लिए उपयोग करने जा रहा हूं जो मैं एक शौक के रूप में काम कर रहा हूं। जब तक इस ट्रिक का उपयोग किसी ऐसी चीज के लिए नहीं किया जाता है जो बग को लागू कर सकती है (मैं देख सकता हूं कि कोई व्यक्ति "सेमीकोलोल, व्युत्पन्न कैसे होगा। चलिए टिप्पणी को अगली पंक्ति में डालते हैं।" और फिर यह आपके कोड को तोड़ देता है।) लेकिन,। कि वास्तव में मेरे शौक के खेल में एक बड़ी बात है? नहीं, और मैं कुछ उपयोगी के लिए शांत चाल का उपयोग कर सकता हूं। बहुत बढ़िया जवाब।
थॉमस डिगन

2
मैं उत्पादन कोड में इस तकनीक का उपयोग करने के लिए पर्याप्त बहादुर नहीं था, लेकिन जहां मैं इसका उपयोग बहुत करता हूं वह इकाई परीक्षण में है, जहां अक्सर संरचना के मूल्य को एक (काफी लंबा) स्ट्रिंग के रूप में डंप करना और इसकी तुलना करना सबसे आसान होता है यह क्या होना चाहिए।
बेन मैकइंटायर

10

योग करने के लिए, मैंने उपयोगकर्ता जावास्क्रिप्ट प्रोग्रामिंग (ओपेरा 11.01) में यहां सूचीबद्ध 2 दृष्टिकोणों की कोशिश की है:

तो मैं ओपेरा उपयोगकर्ता जेएस उपयोगकर्ताओं के लिए काम करने के दृष्टिकोण की सलाह देता हूं। इसके विपरीत लेखक क्या कह रहा था:

यह फ़ायरफ़ॉक्स या ओपेरा पर काम नहीं करता है; केवल IE, क्रोम और सफारी पर।

यह ओपेरा 11 में काम करता है। कम से कम उपयोगकर्ता जेएस लिपियों में। बहुत बुरा मैं अलग-अलग जवाबों पर टिप्पणी नहीं कर सकता या जवाब को बढ़ा नहीं सकता, मैं इसे तुरंत करूंगा। यदि संभव हो तो, उच्चतर विशेषाधिकार वाले व्यक्ति कृपया मेरे लिए करें।


यह मेरी पहली वास्तविक टिप्पणी है। मैंने 2 दिन पहले अपवोट विशेषाधिकार प्राप्त किया है, इसलिए मैंने तुरंत मेरे द्वारा उल्लिखित एक उत्तर को हटा दिया। मेरी मदद करने के मेरे विनम्र प्रयास को विफल करने वाले किसी को भी धन्यवाद।
टायलर

उन सभी के लिए धन्यवाद, जिन्होंने वास्तव में इस उत्तर को उखाड़ फेंका: मेरे पास अब सामान्य टिप्पणियाँ पोस्ट करने के लिए पर्याप्त विशेषाधिकार हैं! तो फिर से धन्यवाद।
टायलर

10

Https://stackoverflow.com/a/15558082/80404 पर मेरा विस्तार । यह एक /*! any multiline comment */प्रतीक के रूप में टिप्पणी की उम्मीद करता है ! का उपयोग कम से कम हटाने के लिए किया जाता है (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));
};

उदाहरण:

var tmpl = function() { /*!
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    </ul>
 </div>
*/}.extractComment();

9

2015 के लिए अपडेट किया गया : यह अब छह साल बाद है: अधिकांश लोग मॉड्यूल लोडर का उपयोग करते हैं, और मुख्य मॉड्यूल सिस्टम में से प्रत्येक में लोडिंग टेम्प्लेट के तरीके हैं। यह इनलाइन नहीं है, लेकिन बहु-प्रकार के बहुस्तरीय स्ट्रिंग टेम्पलेट हैं, और टेम्पलेट्स को आम तौर पर वैसे भी जेएस से बाहर रखा जाना चाहिए

आवश्यकता.जेएस: 'पाठ की आवश्यकता'।

का उपयोग करते हुए require.js 'पाठ' प्लगइन , एक बहु टेम्पलेट में साथ template.html

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

NPM / ब्राउजर: 'brfs' मॉड्यूल

Browserify टेक्स्ट फ़ाइलों को लोड करने के लिए 'brfs' मॉड्यूल का उपयोग करता है । यह वास्तव में आपके बंडल किए गए HTML में आपके टेम्पलेट का निर्माण करेगा।

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

आसान।


9

यदि आप बची हुई नई लाइनों का उपयोग करने के इच्छुक हैं, तो उन्हें अच्छी तरह से उपयोग किया जा सकता है । यह एक पृष्ठ सीमा के साथ एक दस्तावेज की तरह दिखता है

यहां छवि विवरण दर्ज करें


2
क्या यह बाहरी रिक्त स्थान नहीं जोड़ेगा?
टॉमबियर

1
@tomByrer हाँ, अच्छा अवलोकन। यह केवल उन स्ट्रिंग्स के लिए अच्छा है जिन्हें आप सफेद स्थान, जैसे HTML के बारे में परवाह नहीं करते हैं।
seo


8

यह IE, सफारी, क्रोम और फ़ायरफ़ॉक्स में काम करता है:

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

6
बस उसके बारे मै सोच रहा था। क्या आपको लगता है कि यह वैध है? क्या आपको नहीं लगता कि यह प्रदर्शन समस्याओं का कारण बन सकता है?
Sk8erPeter

5
क्यों घटता है? यह एक रचनात्मक जवाब है, अगर बहुत व्यावहारिक नहीं है!
dotancohen

2
नहीं यह नहीं। बल्कि टेम्प्लेट्स का उपयोग करना चाहिए: $ .tmpl () ( api.jquery.com/tmpl ), या EJS ( एम्बेडेड js.com/getting_started.html ), आदि। डाउनवॉट्स का एक कारण यह है कि यह वास्तव में एक वैध कोड से बहुत दूर है और उपयोग कर रहा है। यह प्रदर्शन की भारी समस्या पैदा कर सकता है।
Sk8erPeter

मुझे उम्मीद है कि कोई भी कभी भी इस उत्तर का उपयोग अभ्यास में नहीं करता है, लेकिन यह एक अच्छा विचार है
DC48han

7

आप टाइपस्क्रिप्ट (जावास्क्रिप्ट सुपरसेट) का उपयोग कर सकते हैं , यह मल्टीलाइन स्ट्रिंग्स का समर्थन करता है, और ओवरस्पीड के लिए शुद्ध जावास्क्रिप्ट में वापस ट्रांसपाइल्स देता है:

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

यदि आप सादे जावास्क्रिप्ट के साथ ही पूरा करना चाहते हैं:

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)

ध्यान दें कि iPad / Safari समर्थन नहीं करता है 'functionName.toString()'

यदि आपके पास बहुत अधिक विरासत कोड है, तो आप टाइपस्क्रिप्ट (सफाई के लिए) में सादे जावास्क्रिप्ट संस्करण का भी उपयोग कर सकते हैं:

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

और आप सादे जावास्क्रिप्ट संस्करण से मल्टीलाइन-स्ट्रिंग ऑब्जेक्ट का उपयोग कर सकते हैं, जहां आप टेम्प्लेट को किसी अन्य फ़ाइल में डालते हैं (जिसे आप बंडल में मर्ज कर सकते हैं)।

आप http://www.typescriptlang.org/Playground पर टाइपस्क्रिप्ट की कोशिश कर सकते हैं


IPad / Safari सीमा पर कोई प्रलेखन? MDN लगता है कि यह सब अच्छा है - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
कैम्पबेल

@Campbeln: कॉवकोर ने मुझे यह बताया (उन्होंने कोड का इस्तेमाल किया)। यह खुद का परीक्षण नहीं किया है। शायद iPad / Safari संस्करण पर भी निर्भर करता है - इसलिए शायद निर्भर करता है।
स्टीफन स्टेगर

6

यह करने का ES6 तरीका टेम्प्लेट शाब्दिक का उपयोग करके होगा:

const str = `This 

is 

a

multiline text`; 

console.log(str);

यहाँ अधिक संदर्भ


यह उत्तर न केवल छोटा, अधूरा और खराब स्वरूपित है, बल्कि पिछले उत्तरों में बिल्कुल कुछ भी नहीं जोड़ता है। इसे फ़्लैग करना और हटवाना है।
विक्टर श्रोडर

5

ES6 आपको कई लाइनों पर एक स्ट्रिंग निर्दिष्ट करने के लिए एक बैकटिक का उपयोग करने की अनुमति देता है। इसे टेम्प्लेट लिटरल कहा जाता है। ऐशे ही:

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

NodeJS में बैकटिक कार्यों का उपयोग करना, और यह क्रोम, फ़ायरफ़ॉक्स, एज, सफारी और ओपेरा द्वारा समर्थित है।

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


4

Javascrips में मल्टीलाइन स्ट्रिंग्स बनाने का सबसे आसान तरीका बैकटिक्स (``) के उपयोग के साथ है। यह आपको मल्टीलाइन स्ट्रिंग्स बनाने की अनुमति देता है जिसमें आप चरों को सम्मिलित कर सकते हैं ${variableName}

उदाहरण:

let name = 'Willem'; 
let age = 26;

let multilineString = `
my name is: ${name}

my age is: ${age}
`;

console.log(multilineString);

अनुकूलता:

  • यह ES6// में शुरू किया गया थाes2015
  • यह अब सभी प्रमुख ब्राउज़र विक्रेताओं (इंटरनेट एक्सप्लोरर को छोड़कर) द्वारा मूल रूप से समर्थित है

यहाँ मोज़िला डॉक्स में सटीक संगतता की जाँच करें


क्या यह अब सभी हाल के ब्राउज़रों के साथ संगत है? या फिर कुछ ब्राउज़र हैं जो अभी भी इस सिंटैक्स का समर्थन नहीं करते हैं?
सेमीप्रेशन

मेरी चरम देर से टिप्पणी के लिए क्षमा करें, उत्तर ने संगतता जानकारी को संपादित किया;)
विलेम वैन डेर वीएन

3

स्ट्रिंग-कॉनसैट के लिए सरणी-आधारित जॉइन का मेरा संस्करण:

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

यह मेरे लिए अच्छी तरह से काम किया है, खासकर जब मैं अक्सर html में मूल्यों को सम्मिलित करता हूं इस तरह से निर्माण किया। लेकिन इसकी बहुत सी सीमाएँ हैं। इंडेंटेशन अच्छा होगा। नेस्टेड उद्धरण चिह्नों से निपटने के लिए नहीं होना वास्तव में अच्छा होगा, और बस इसका भारीपन मुझे परेशान करता है।

क्या .push () को बहुत समय लगने वाले एरे में जोड़ना है? देखें इससे संबंधित जवाब:

( क्या कोई कारण है कि जावास्क्रिप्ट डेवलपर Array.push () का उपयोग नहीं करते हैं? )

इन (विरोधी) टेस्ट रन को देखने के बाद, ऐसा लगता है कि .push () स्ट्रिंग सरणियों के लिए ठीक है जो संभवतः 100 से अधिक आइटम नहीं बढ़ेगा - मैं इसे बड़े सरणियों के लिए अनुक्रमित जोड़े के पक्ष में टालूंगा।


3

आप +=अपनी स्ट्रिंग को बदलने के लिए उपयोग कर सकते हैं , ऐसा लगता है जैसे किसी ने उत्तर नहीं दिया, जो पठनीय होगा, और साफ-सुथरा भी होगा ... कुछ इस तरह

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

के रूप में भी लिखा जा सकता है

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

console.log(hello);

3

यह भी ध्यान दें कि, जब प्रत्येक पंक्ति के अंत में फ़ॉर्वर्ड बैकस्लैश का उपयोग करके कई लाइनों पर स्ट्रिंग का विस्तार किया जाता है, तो फ़ॉरवर्ड बैकलैश के बाद किसी भी अतिरिक्त वर्ण (अधिकतर रिक्त स्थान, टैब और गलतियों को जोड़ा जाता है) के कारण अप्रत्याशित वर्ण त्रुटि होगी, जिसे खोजने में मुझे एक घंटे का समय लगा बाहर

var string = "line1\  // comment, space or tabs here raise error
line2";

3

कृपया इंटरनेट के उपयोग स्ट्रिंग स्ट्रिंग के प्यार के लिए और इसके लिए ES6 समाधान का उपयोग न करने का विकल्प चुनें। ES6 बोर्ड भर में समर्थित नहीं है, बहुत हद तक CSS3 और कुछ ब्राउज़रों को CSS3 आंदोलन के अनुकूल होने के लिए धीमा किया जा रहा है। सादे ओल 'जावास्क्रिप्ट का प्रयोग करें, आपके अंतिम उपयोगकर्ता आपको धन्यवाद देंगे।

उदाहरण:

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


3
जब मैं आपकी बात से सहमत हूं, तो मैं जावास्क्रिप्ट को "अच्छा" ol नहीं कहूंगा
user151496

2

आपको कॉन्टेक्शन ऑपरेटर '+' का उपयोग करना होगा।

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

\nअपने स्रोत कोड का उपयोग करके ऐसा दिखेगा -

इस 
 <br> है
 <br> बहु
 <br> स्ट्रिंग।

<br>अपने ब्राउज़र का उपयोग करके आउटपुट जैसा दिखेगा -

इस
है
बहु
स्ट्रिंग।

1

मुझे लगता है कि इस समाधान को IE, क्रोम, फ़ायरफ़ॉक्स, सफारी, ओपेरा में काम करना चाहिए -

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>

शुद्ध जावास्क्रिप्ट का उपयोग करना:

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

चीयर्स !!


<xmp>इतना वंचित है। इसे HTML में अनुमति दी जा सकती है, लेकिन इसका उपयोग किसी भी लेखक द्वारा नहीं किया जाना चाहिए। देखें stackoverflow.com/questions/8307846/…
बर्गी

@ बर्गी, आप सही हैं .. और <pre>;मेरे समाधान में मदद से बच नहीं रहे हैं .. मैं आज इसी तरह के मुद्दे पर आया था और एक समाधान निकालने की कोशिश कर रहा था .. लेकिन मेरे मामले में, मुझे इस मुद्दे को ठीक करने का एक बहुत अच्छा तरीका मिला <xmp> या किसी अन्य टैग के बजाय html टिप्पणियों में आउटपुट डाल रहा है। जबरदस्त हंसी। मुझे पता है कि ऐसा करने का कोई मानक तरीका नहीं है, लेकिन मैं इस मुद्दे पर कल मोरनी के साथ काम करूंगा .. चीयर्स !!
आदित्य हजारे

दुर्भाग्य से यहां तक ​​कि style="display:none"क्रोम <img>उदाहरण ब्लॉक में वर्णित किसी भी चित्र को लोड करने की कोशिश करता है ।
जेसी ग्लिक

0

बस बेनामी जवाब देने की कोशिश की और पाया कि यहाँ एक छोटी सी चाल है, यह काम नहीं करता है यदि बैकस्लैश के बाद कोई स्थान है \
तो निम्न कार्य नहीं करता है -

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

लेकिन जब अंतरिक्ष को हटा दिया जाता है तो यह काम करता है -

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

alert(x.test);​

आशा है ये मदद करेगा !!


7
जाहिर है अगर आपके पास बैकस्लैश के बाद स्पेस है, तो बैकस्लैश स्पेस से बच जाता है। यह स्थान नहीं, लाइनब्रेक से बचने के लिए माना जाता है।
सेन्ज़स
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.