Gói dòng chữ dài mẫu thành đa dòng mà không tạo dòng mới trong chuỗi

Trong mẫu chữ es6, làm thế nào người ta có thể bọc một mẫu dài theo nghĩa đen thành đa dòng mà không tạo ra một dòng mới trong chuỗi?

Ví dụ: nếu bạn làm điều này:

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

Sau đó, nó sẽ tạo một biểu tượng dòng mới cho chuỗi, như diễn giải nó để có một dòng mới. Làm thế nào người ta có thể bọc mẫu dài bằng chữ thành nhiều dòng mà không tạo dòng mới?

Nếu bạn giới thiệu một dòng tiếp tục ( \) tại điểm của dòng mới theo nghĩa đen, nó sẽ không tạo ra một dòng mới trên đầu ra:

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

Đây là một cái cũ. Nhưng nó đã đưa ra. Nếu bạn để lại bất kỳ khoảng trống nào trong trình soạn thảo, nó sẽ đặt chúng vào đó.

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

chỉ làm biểu tượng + bình thường

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

Bạn chỉ có thể ăn các ngắt dòng trong mẫu chữ của bạn.

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

EDIT : Tôi đã tạo một mô-đun NPM nhỏ với tiện ích này. Nó hoạt động trên web và trong Node và tôi thực sự khuyên bạn nên sử dụng mã trong câu trả lời dưới đây vì nó mạnh mẽ hơn nhiều. Nó cũng cho phép duy trì các dòng mới trong kết quả nếu bạn nhập chúng theo cách thủ công \nvà cung cấp các chức năng khi bạn đã sử dụng thẻ bằng chữ mẫu cho một thứ khác: https://github.com/iansan5653/compress-tag

Tôi biết tôi đến trễ để trả lời ở đây, nhưng câu trả lời được chấp nhận vẫn có nhược điểm là không cho phép thụt lề sau khi ngắt dòng, điều đó có nghĩa là bạn vẫn không thể viết mã trông rất đẹp chỉ bằng cách thoát dòng mới.

Thay vào đó, tại sao không sử dụng một chức năng chữ được gắn thẻ ?

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

Sau đó, bạn có thể chỉ cần gắn thẻ bất kỳ mẫu nào bạn muốn có dấu ngắt dòng:

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

Điều này có nhược điểm là có thể có hành vi không mong muốn nếu nhà phát triển trong tương lai không sử dụng cú pháp mẫu được gắn thẻ hoặc nếu bạn không sử dụng tên hàm mô tả, nhưng hiện tại nó giống như một giải pháp sạch nhất.

Một tùy chọn khác là sử dụng Array.join, như vậy:

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

Sử dụng cái cũ và cái mới. Các mẫu chữ là tuyệt vời nhưng nếu bạn muốn tránh các chữ dài để có các dòng mã nhỏ gọn, nối chúng và ESLint sẽ không gây ồn ào.

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

Tương tự như câu trả lời của Doug, điều này được chấp nhận bởi cấu hình TSLint của tôi và vẫn chưa được xử lý bởi trình định dạng tự động IntelliJ của tôi:

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

Giải pháp được đề xuất bởi @CodingIntrigue không hoạt động đối với tôi trên nút 7. Chà, nó hoạt động nếu tôi không sử dụng tiếp tục dòng trên dòng đầu tiên, nó sẽ thất bại.

Đây có lẽ không phải là giải pháp tốt nhất, nhưng nó hoạt động mà không gặp vấn đề gì:

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