स्ट्रिंग में एक नई रेखा बनाए बिना बहु टेम्पलेट शाब्दिक लाइन को मल्टीलाइन में लपेटें

Question

Es6 टेम्पलेट शाब्दिकों में, स्ट्रिंग में एक नई रेखा बनाए बिना बहु-लंबा एक लंबा खाका शाब्दिक कैसे लपेट सकता है?

उदाहरण के लिए, यदि आप ऐसा करते हैं:

const text = `a very long string that just continues
and continues and continues`

फिर यह स्ट्रिंग को एक नई लाइन सिंबल बनाएगा, क्योंकि यह एक नई लाइन की व्याख्या करता है। नई रूपरेखा बनाए बिना कोई भी व्यक्ति लंबे टेम्प्लेट को कई लाइनों में कैसे लपेट सकता है?

Comments

FWIW अनपेक्षित रिक्त स्थान के खिलाफ लाइन निरंतरता को पढ़ना और भंगुर करना मुश्किल है, इसलिए मैं कोडिंगडाइंट्रिज एक पर मोंटे जोन्स समाधान पसंद करता हूं। FWIW Google स्टाइल गाइड मोंटे जोन्स समाधान की सिफारिश करता है और AirBnB गाइड इसके बजाय बहुत लंबी लाइन का उपयोग करने की सिफारिश करता है - अर्थात, लाइन निरंतरता की सिफारिश नहीं करता है। FWIW, मैं इस विषय को अन्य स्टाइल गाइड की त्वरित जांच में नहीं पा सका।

— टॉम ओ'नील

Answer 1

यदि आप शाब्दिक रूप से नई रेखा के बिंदु पर एक पंक्ति निरंतरता ( \) का परिचय देते हैं , तो यह आउटपुट पर एक नई पंक्ति नहीं बनाएगा:

const text = `a very long string that just continues\
and continues and continues`;
console.log(text); // a very long string that just continuesand continues and continues

Comments

मुझे यकीन नहीं है कि आपका मतलब क्या है। क्या आप एक REPL उदाहरण प्रदान कर सकते हैं ?

— कोडिंगइंट्रीग्यू

मेरे मामले में आसानी से नहीं, क्योंकि विभिन्न चर कॉफ़िशस्क्रिप्ट कॉन्फिग फाइलों आदि से लिए गए हैं। मिमी .. ऐसा लगता है कि यह अन्यथा काम करता है, लेकिन किसी कारण से यह वहां खाली जगह जोड़ता है

— विले मिकक-ओजा

यदि आप पहली पंक्ति पर एक पंक्ति निरंतरता का उपयोग करते हैं तो यह मेरे लिए काम नहीं करता है (नोड v7)

— डैनियलो ५१५

यदि आप इसे कभी-कभी परीक्षण में उपयोग कर रहे हैं तो यह उसी स्ट्रिंग को वापस नहीं करता है। मैंने अपने सिर दर्द को डेलीन का उपयोग करके हल किया है जो कि सिर्फ एक है1.1k Airbnb library

— iarroyo

यह समाधान इंडेंट के साथ अच्छी तरह से काम नहीं करता है (और इंडेंट विकास में सामान्य हैं)। नई लाइन पर the के बाद का चरित्र उस रेखा पर पहला वर्ण होना चाहिए । मतलब, and continues...इंडेंट नियम को तोड़ते हुए नई लाइन पर 0 वें स्थान से शुरू करना है।

— KingJulian

Answer 2

यह पुराना है। लेकिन यह ऊपर आया। यदि आप संपादक में कोई स्थान छोड़ते हैं तो यह उन्हें वहां डाल देगा।

if
  const text = `a very long string that just continues\
  and continues and continues`;

बस सामान्य + प्रतीक करते हैं

if
  const text = `a very long string that just continues` +
  `and continues and continues`;

Comments

अच्छा है, लेकिन मैं इसका उपयोग करने का कारण '+' प्रतीक से बचने के लिए हूं। यह पढ़ने के लिए कोड को कठिन बनाता है और साथ काम करने के लिए अधिक कष्टप्रद होता है।

— dgo

Answer 3

आप अपने खाका शाब्दिक के अंदर लाइन ब्रेक खा सकते हैं।

// Thanks to https://twitter.com/awbjs for introducing me to the idea
// here: https://esdiscuss.org/topic/multiline-template-strings-that-don-t-break-indentation

const printLongLine = continues => {
    const text = `a very long string that just ${continues}${''
                 } and ${continues} and ${continues}`;
    return text;
}
console.log(printLongLine('continues'));

Comments

यह एक बहुत अच्छा हैक है, लेकिन यह विफल हो जाता है अगर आपके पास prettierअपने आईडीई में एक सुंदर फ़ॉर्मेटर (जैसे ) कॉन्फ़िगर है। prettierइसे वापस सिंगल लाइन में लपेटता है।

— रवी पांडेय

Answer 4

संपादित करें : मैंने इस उपयोगिता के साथ एक छोटा एनपीएम मॉड्यूल बनाया है। यह वेब पर और नोड में काम करता है और मैं इसे अपने नीचे दिए गए उत्तर में कोड पर अत्यधिक अनुशंसित करता हूं क्योंकि यह कहीं अधिक मजबूत है। यह परिणाम में newlines को संरक्षित करने की अनुमति देता है यदि आप उन्हें मैन्युअल रूप से इनपुट करते हैं \n, और जब आप पहले से ही किसी और चीज़ के लिए टेम्पलेट शाब्दिक टैग का उपयोग करते हैं तो कार्य प्रदान करता है: https://github.com/iansan5653/compress-tag

---

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

इसके बजाय, टैग किए गए टेम्प्लेट शाब्दिक फ़ंक्शन का उपयोग क्यों नहीं किया जाता है ?

function noWhiteSpace(strings, ...placeholders) {
  // Build the string as normal, combining all the strings and placeholders:
  let withSpace = strings.reduce((result, string, i) => (result + placeholders[i - 1] + string));
  let withoutSpace = withSpace.replace(/\s\s+/g, ' ');
  return withoutSpace;
}

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

let myString = noWhiteSpace`This is a really long string, that needs to wrap over
    several lines. With a normal template literal you can't do that, but you can 
    use a template literal tag to allow line breaks and indents.`;

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

Answer 5

एक अन्य विकल्प का उपयोग करना है Array.join, जैसे:

[
    'This is a very long string. ',
    'It just keeps going ',
    'and going ',
    'and going ',
    'and going ',
    'and going ',
    'and going ',
    'and going',
].join('')

Answer 6

पुराने और नए का उपयोग करें। टेम्पलेट शाब्दिक महान हैं, लेकिन यदि आप लंबे शाब्दिक से बचना चाहते हैं ताकि कोड की कॉम्पैक्ट लाइनें हों, उन्हें संक्षिप्त करें और ESLint एक उपद्रव का कारण नहीं बनेगा।

const text = `a very long string that just continues`
  +` and continues and continues`;
console.log(text);

Answer 7

डग के जवाब के समान यह मेरे टीएसलिंट कॉन्फिग द्वारा स्वीकार किया जाता है और मेरे इंटेलीजे ऑटो-फॉर्मेटर से अछूता रहता है:

const text = `a very long string that just ${
  continues
} and ${continues} and ${continues}`

Answer 8

@CodingIntrigue द्वारा प्रस्तावित समाधान नोड 7 पर मेरे लिए काम नहीं कर रहा है। ठीक है, यह काम करता है अगर मैं पहली पंक्ति पर एक लाइन निरंतरता का उपयोग नहीं करता हूं, तो यह अन्यथा विफल रहता है।

यह शायद सबसे अच्छा समाधान नहीं है, लेकिन यह समस्याओं के बिना काम करता है:

(`
    border:1px solid blue;
    border-radius:10px;
    padding: 14px 25px;
    text-decoration:none;
    display: inline-block;
    text-align: center;`).replace(/\n/g,'').trim();