Question

在es6模板文字中，如何将长模板文字包装到多行而不在字符串中创建新行？

例如，如果你这样做：

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

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

Answer 1

如果您在文字中的换行符处引入line continuation（\），则不会在输出中创建换行符：

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

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

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

Answer 4

我知道我在这里迟到答案了，但是被接受的答案仍然具有在换行符后不允许缩进的缺点，这意味着您仍然不能仅通过转义换行符来编写外观精美的代码。

相反，为什么不使用tagged template literal function？

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

与Doug's answer类似，我的TSLint配置接受了它，而IntelliJ自动格式化程序则保持不变：

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();

Answer 9

我参加聚会有点晚了，但是对于以后在这个问题上的任何访问，我发现这种灵魂对于我的用例来说是最合适的。

我正在运行Node.js服务器，并希望以字符串格式返回html，这是我解决的方法：

我的响应对象：

const httpResponse = {
    message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices et odio eget blandit. Donec non tellus diam. Duis massa augue, cursus a ornare vel, pharetra ac turpis.',
    html: `
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Praesent ultrices et odio eget blandit.</p>
        <ul>
            <li>Donec non tellus diam</li>
            <li>Duis massa augue</li>
        </ul>
    `,
}

在发送http请求时，这将转换为以下内容：

{
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices et odio eget blandit. Donec non tellus diam. Duis massa augue, cursus a ornare vel, pharetra ac turpis.",
    "html": "\n\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n\t\t<p>Praesent ultrices et odio eget blandit.</p>\n\t\t<ul>\n\t\t\t<li>Donec non tellus diam</li>\n\t\t\t<li>Duis massa augue</li>\n\t\t</ul>\n\t"
}

这当然很难看而且很难使用。因此，在发送http之前，我会修剪字符串的每一行。

httpResponse.html = httpResponse.html.split('\n').map(line => line.trim()).join('')

这是简单的代码行之后的结果。

{
    "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices et odio eget blandit. Donec non tellus diam. Duis massa augue, cursus a ornare vel, pharetra ac turpis.",
    "html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Praesent ultrices et odio eget blandit.</p><ul><li>Donec non tellus diam</li><li>Duis massa augue</li></ul>"
}

Answer 10

如果你的问题是相反的，你需要保留换行符，但由于某种原因，他们没有得到尊重，只需在文本容器中添加 css 属性：

#yourTextContainer {
  white-space: pre-line;
}

Answer 11

此 npm 包允许您执行以下操作...

import { oneLine } from 'common-tags';

const foo = oneLine`foo
bar
baz`;

console.log(foo); // foo bar baz

将长模板文字行换行到多行而不在字符串中创建新行

11 个答案: