将长模板文字行包装为多行,而无需在字符串中创建新行


142

在es6模板文字中,如何在不创建新行的情况下将长模板文字包装成多行?

例如,如果您这样做:

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

然后,它将为该字符串创建一个新行符号,以解释它具有新行。如何在不创建换行符的情况下将长模板文字包装到多行?


2
FWIW难以理解连续的行,并且难以应对意外的空间,因此我更喜欢Monte Jones解决方案而不是Codingintrigue解决方案。FWIW,Google样式指南建议使用Monte Jones解决方案,而AirBnB指南建议仅使用很长的行,也就是说,都不建议使用连续行。FWIW,在其他样式指南的快速检查中找不到该主题。
Tom O'Neill '18

Answers:


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
不知道我明白你的意思。您可以提供一个REPL示例吗?
CodingIntrigue '16

1
就我而言,这并不容易,因为从coffeescript配置文件等中获取了不同的变量。mm ..看来它可以正常工作,但是由于某种原因,它在那里增加了空白
Ville Miekk-oja,2016年

1
如果您在第一行上使用换行符,那么它对我不起作用(节点v7)
Danielo515

2
如果您将其用于测试,则有时它不会返回相同的字符串。我已经通过轮廓解决了我的头痛,这只是1.1k Airbnb library
iarroyo

45
此解决方案不适用于缩进(缩进在开发中很常见)。新行\后面的字符必须是该行的第一个字符。意思是,and continues...必须从新行的第0个位置开始,打破缩进规则。
KingJulian

54

这是旧的。但它来了。如果您在编辑器中留下任何空格,它将放置在其中。

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

很好,但是我使用它的部分原因是为了避免使用'+'符号。它使代码更难阅读,并且更令人讨厌。
dgo

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在IDE中配置了漂亮的格式化程序(如),它就会失败。prettier将其包装回单行。
Rvy Pandey

11

编辑:我已经使用此实用程序制作了一个很小的NPM模块。它可以在Web和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.`;

如果将来的开发人员不习惯使用标记的模板语法,或者如果您不使用描述性的函数名称,那么这样做确实可能会产生意外行为,但感觉这是目前最干净的解决方案。


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

使用旧的和新的。模板文字很不错,但是如果要避免使用冗长的文字以使代码行紧凑,请将它们串联起来,ESLint不会引起大惊小怪。

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

1

Doug的答案类似,这被我的TSLint配置接受,而我的IntelliJ自动格式化程序则保持不变:

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

0

@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();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.