স্ট্রিংয়ে একটি নতুন লাইন তৈরি না করে দীর্ঘ টেম্পলেট আক্ষরিক লাইন মাল্টলাইনে মোড়ুন


141

এস template টেমপ্লেট আক্ষরিক ক্ষেত্রে, স্ট্রিংয়ে কোনও নতুন লাইন তৈরি না করেই কীভাবে লম্বা টেমপ্লেটটি দীর্ঘতর টেম্পলেটটি মোড়ানো যায়?

উদাহরণস্বরূপ, আপনি যদি এটি করেন:

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

তারপরে এটি স্ট্রিংয়ের জন্য একটি নতুন লাইন প্রতীক তৈরি করবে, এটি একটি নতুন রেখা থাকার অর্থ ব্যাখ্যা করবে। কীভাবে একটি নতুন লাইন তৈরি না করে একাধিক লাইনে দীর্ঘ টেম্পলেটটি আক্ষরিক মোড়তে পারে?


2
FWIW লাইন ধারাবাহিকতাগুলি অপ্রত্যাশিত জায়গাগুলির বিরুদ্ধে পড়া এবং ভঙ্গুর পড়া কঠিন, তাই আমি কোডিংইন্ট্রিগের ওপরে মন্টি জোনস সমাধানটি পছন্দ করি। এফডব্লিউআইডাব্লু গুগল স্টাইল গাইড মন্টি জোন্স সমাধানের পরামর্শ দেয় এবং এয়ারবিএনবি গাইড পরিবর্তে খুব দীর্ঘ লাইন ব্যবহার করার পরামর্শ দেয় - এটি উভয়ই লাইন ধারাবাহিকতার প্রস্তাব দেয় না। এফডাব্লুআইডাব্লু, অন্যান্য স্টাইল গাইডের তাত্ক্ষণিকভাবে আমি এই বিষয়টি খুঁজে পাইনি।
টম ও'নিল

উত্তর:


192

আপনি যদি আক্ষরিক ক্ষেত্রে নতুন লাইনের বিন্দুতে একটি লাইন ধারাবাহিকতা ( \) প্রবর্তন করেন তবে এটি আউটপুটটিতে একটি নতুন লাইন তৈরি করবে না:

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

1
আপনি কী বলতে চাইছেন তা আমি নিশ্চিত Not আপনি একটি REPL উদাহরণ প্রদান করতে পারেন ?
কোডিংআইন্ট্রিগ

1
আমার ক্ষেত্রে সহজে না, যেহেতু বিভিন্ন ভেরিয়েবল coffeescript কনফিগ ফাইল থেকে নেয়া হয় ইত্যাদি .. মিমি .. মনে হচ্ছে যে এটি অন্যথায় কাজ করে কিন্তু কিছু কারণে সেখানে খালি জায়গা যোগ
Ville, Miekk-oja

1
আপনি যদি প্রথম লাইনে একটি লাইন ধারাবাহিকতা ব্যবহার করেন তবে এটি আমার পক্ষে কাজ করে না (নোড
ভি

2
আপনি যদি কখনও কখনও এটি পরীক্ষায় ব্যবহার করেন তবে এটি একই স্ট্রিংটি ফিরে আসবে না। আমি আমার মাথাব্যথাগুলি ডিলাইন ব্যবহার করে সমাধান করেছি যা কেবল একটি1.1k Airbnb library
ইয়ারোও

44
এই সমাধানটি ইনডেন্টগুলির সাথে সুন্দরভাবে কাজ করে না (এবং ইনডেন্টগুলি বিকাশে সাধারণ)। নতুন লাইনে \ এর পরের অক্ষরটি সেই লাইনের প্রথম অক্ষর হতে হবে । অর্থ, and continues...ইনডেন্ট নিয়ম ভঙ্গ করে নতুন লাইনে 0 তম অবস্থান থেকে শুরু করতে হবে।
কিংজুলিয়ান

53

এটি একটি পুরানো। তবে উঠে এসেছিল। আপনি যদি সম্পাদকটিতে কোনও ফাঁকা জায়গা রেখে দেন তবে এটি সেগুলিকে সেখানে রাখবে।

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

ভাল, তবে যে কারণটি আমি এটি ব্যবহার করি তার একটি অংশ '+' চিহ্নটি এড়ানো। এটি পড়তে কোডকে আরও শক্ত করে এবং এতে কাজ করার জন্য আরও বিরক্তিকর করে তোলে।
ডিজিও

21

আপনি কেবলমাত্র আপনার টেম্পলেটটির অভ্যন্তরে লাইন বিরতি খেতে পারেন।

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


3
এটি একটি খুব ভাল হ্যাক, তবে prettierআপনার আইডিইতে আপনার যদি একটি দুর্দান্ত ফর্ম্যাটর (লাইক ) কনফিগার করা থাকে তবে এটি ব্যর্থ হয় । prettierএটিকে একক লাইনে আবৃত করে।
আরভি পান্ডে

11

সম্পাদনা : আমি এই ইউটিলিটি দিয়ে একটি ক্ষুদ্র এনপিএম মডিউল তৈরি করেছি। এটি ওয়েব এবং নোডে কাজ করে এবং আমি আমার নীচের উত্তরে কোডটির চেয়ে এটির চেয়ে বেশি সুপারিশ করি কারণ এটি আরও শক্তিশালী। এটি যদি আপনাকে ম্যানুয়ালি সেগুলি হিসাবে ইনপুট করে থাকে এবং ফলস্বরূপ নতুন লাইনগুলি সংরক্ষণ করার অনুমতি দেয় \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.`;

যদি ভবিষ্যতের বিকাশকারী ট্যাগযুক্ত টেম্পলেট সিনট্যাক্স ব্যবহার না করে বা আপনি যদি বর্ণনামূলক ফাংশনটির নাম ব্যবহার না করেন তবে সম্ভবত এটি অপ্রত্যাশিত আচরণের অপূর্ণতা রয়েছে তবে এটি আপাতত সবচেয়ে পরিষ্কার সমাধান বলে মনে হয়।


8

অন্য একটি বিকল্প ব্যবহার করা হয় 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('')

3

পুরানো এবং নতুন ব্যবহার করুন। টেমপ্লেট আক্ষরিক দুর্দান্ত তবে আপনি যদি লম্বা লিটারালগুলি এড়াতে চান যাতে কোডের কমপ্যাক্ট লাইন থাকে, তাদের সাথে একত্রিত হন এবং ইএসলিন্ট কোনও গোলমাল সৃষ্টি করতে পারে না।

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

1

ডগের উত্তরের অনুরূপ এটি আমার টিএসলিন্ট কনফিগারেশনের মাধ্যমে গৃহীত হয়েছে এবং আমার ইন্টেলিজ অটো-ফর্ম্যাটারের দ্বারা অচ্ছুত রয়েছে:

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

0

@ কোডিংইন্ট্রিগ দ্বারা প্রস্তাবিত সমাধানটি নোড me এ আমার জন্য কাজ করছে না, ভাল, আমি প্রথম লাইনে একটি লাইন ধারাবাহিকতা ব্যবহার না করলে এটি কাজ করে, অন্যথায় এটি ব্যর্থ হয়।

এটি সম্ভবত সেরা সমাধান নয়, তবে সমস্যা ছাড়াই এটি কাজ করে:

(`
    border:1px solid blue;
    border-radius:10px;
    padding: 14px 25px;
    text-decoration:none;
    display: inline-block;
    text-align: center;`).replace(/\n/g,'').trim();
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.