ตัดบรรทัดลิเทอรัลเทมเพลตแบบยาวเป็นหลายบรรทัดโดยไม่ต้องสร้างบรรทัดใหม่ในสตริง

ในตัวอักษรเทมเพลต es6 เราจะรวมตัวอักษรแบบยาวเป็นหลายบรรทัดโดยไม่ต้องสร้างบรรทัดใหม่ในสตริงได้อย่างไร

ตัวอย่างเช่นหากคุณทำสิ่งนี้:

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

จากนั้นจะสร้างสัญลักษณ์บรรทัดใหม่ให้กับสตริงเนื่องจากตีความให้มีบรรทัดใหม่ เราจะรวมลิเทอรัลแบบยาวเป็นหลายบรรทัดโดยไม่ต้องสร้างบรรทัดใหม่ได้อย่างไร

หากคุณแนะนำความต่อเนื่องของบรรทัด ( \) ที่จุดขึ้นบรรทัดใหม่ในลิเทอรัลจะไม่สร้างบรรทัดใหม่บนเอาต์พุต:

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

อันนี้เป็นของเก่า แต่มันขึ้นมา หากคุณเว้นช่องว่างไว้ในตัวแก้ไขก็จะใส่ไว้ในนั้น

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

คุณสามารถกินเส้นแบ่งภายในแม่แบบตามตัวอักษรได้

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

แก้ไข : ฉันได้สร้างโมดูล NPM เล็ก ๆ ด้วยยูทิลิตี้นี้ มันใช้งานได้บนเว็บและใน Node และฉันขอแนะนำให้ใช้รหัสนี้ในคำตอบด้านล่างของฉันเพราะมันแข็งแกร่งกว่ามาก นอกจากนี้ยังช่วยในการรักษาบรรทัดใหม่ในผลลัพธ์หากคุณป้อนด้วยตนเองเป็น\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.`;

สิ่งนี้มีข้อเสียเปรียบที่อาจมีพฤติกรรมที่ไม่คาดคิดหากนักพัฒนาในอนาคตไม่คุ้นเคยกับไวยากรณ์ของเทมเพลตที่ติดแท็กหรือถ้าคุณไม่ได้ใช้ชื่อฟังก์ชันที่สื่อความหมาย แต่ตอนนี้รู้สึกว่าเป็นโซลูชันที่สะอาดที่สุด

อีกทางเลือกหนึ่งคือการใช้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('')

ใช้ทั้งเก่าและใหม่ ตัวอักษรของเทมเพลตนั้นยอดเยี่ยม แต่ถ้าคุณต้องการหลีกเลี่ยงตัวอักษรที่มีความยาวเพื่อให้มีบรรทัดโค้ดที่กะทัดรัดให้เชื่อมต่อเข้าด้วยกันและ ESLint จะไม่ทำให้ยุ่งยาก

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

คล้ายกับคำตอบของ Dougสิ่งนี้ยอมรับโดยการกำหนดค่า TSLint ของฉันและยังคงไม่ถูกแตะต้องโดยตัวจัดรูปแบบอัตโนมัติ IntelliJ ของฉัน:

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

วิธีแก้ปัญหาที่เสนอโดย @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();