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




string multiline (20)

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

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

ईएस 6 अद्यतन:

जैसा कि पहले उत्तर का उल्लेख है, 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.';

अद्यतन करें:

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

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

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

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

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

मूल ES5 उत्तर:

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

"foo \
bar"

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

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

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

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

console.log(hello);

आप शुद्ध जावास्क्रिप्ट में 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 का उपयोग करने के लिए एक असली समाधान होगा।


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

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

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

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


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

उदाहरण:

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


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

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

पैटर्न 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

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


मुझे यह वाक्यविन्यास और इंडेंडेशन पसंद है:

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

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


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

मैंने इसे एक div को आउटपुट करके हल किया, इसे छिपाने के लिए, और जब मुझे इसकी आवश्यकता होती है तो jQuery द्वारा div id को कॉल करना।

जैसे

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

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

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

जो एकाधिक पाठों पर मेरा पाठ देता है। अगर मैं फोन करता हूँ

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

मुझे मिला:


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


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

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

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

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

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

  • एक <script>...</script> ब्लॉक को अपने मल्टीलाइन टेक्स्ट को head टैग में जोड़ें;
  • अपने मल्टीलाइन टेक्स्ट को इस तरह प्राप्त करें ... (टेक्स्ट एन्कोडिंग के लिए देखें: यूटीएफ -8, एएससीआईआईआई)

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

स्ट्रिंग concat के लिए सरणी आधारित शामिल का मेरा संस्करण:

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

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

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

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

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


डाउनवॉटर : यह कोड केवल जानकारी के लिए आपूर्ति की जाती है।

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

DEMO

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>
    </li>
EOF*/
// 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'));

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

<!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अपने स्रोत कोड का उपयोग करके देखेंगे -

This 
 <br>is
 <br>multiline
 <br>string.

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

This
is
multiline
string.

यदि आप केवल नोड में चल रहे हैं, तो आप फ़ाइल से बहु-पंक्ति स्ट्रिंग में पढ़ने के लिए fs मॉड्यूल का उपयोग कर सकते हैं:

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});

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

उदाहरण:

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

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

my age is: ${age}
`;

console.log(multilineString);

संगतता:

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

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






heredoc