将长模板文字行包装成多行而不在字符串中创建新行

Posted 2023-02-22

【中文标题】将长模板文字行包装成多行而不在字符串中创建新行

【英文标题】：Wrap long template literal line to multiline without creating a new line in the string

【发布时间】：2016-09-16 04:55:48

【问题描述】：

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

例如，如果你这样做：

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

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

【问题讨论】：

FWIW 行延续很难阅读，并且对意想不到的空间很脆弱，所以我更喜欢 Monte Jones 解决方案而不是 Codingintrigue 解决方案。 FWIW 谷歌风格指南recommends Monte Jones 解决方案和 AirBnB 指南recommends 只是使用了很长的线——也就是说，两者都不建议继续使用线。 FWIW，我在快速查看其他风格指南时找不到这个主题。

【参考方案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

【讨论】：

不确定我理解你的意思。你能提供一个REPL Example吗？

在我的情况下并不容易，因为不同的变量是从咖啡脚本配置文件等中获取的......嗯......它似乎可以正常工作，但由于某种原因它在那里增加了空白空间

如果你在第一行使用续行，它对我不起作用（节点 v7）

如果您在测试中使用它，有时它不会返回相同的字符串。我已经使用deline 解决了我的头痛问题，这只是一个1.1k Airbnb library

这个解决方案不能很好地使用缩进（缩进在开发中很常见）。新行中 \ 之后的字符必须是该行的 第一个字符。意思是，and continues... 必须从新行的第 0 位开始，这违反了缩进规则。

【参考方案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`;

【讨论】：

很好，但我使用它的部分原因是为了避免使用“+”符号。它使代码更难阅读，更烦人。

不幸的是，这不适用于标记模板文字。

对于较新的 javascript 引擎，连接也慢得多。请参阅this *** post 上的“更新（2020 年 2 月）”部分。

【参考方案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'));

【讨论】：

这是一个非常好的 hack，但是如果您在 IDE 中配置了漂亮的格式化程序（例如 prettier），它就会失败。 prettier 将其包装回单行。

【参考方案4】：

另一种选择是使用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('')

【讨论】：

如此优雅！谢谢！

【参考方案5】：

编辑：我用这个实用程序制作了一个小型 NPM 模块。它适用于 web 和 Node，我强烈推荐它而不是我下面答案中的代码，因为它更加健壮。如果您手动将换行符输入为\n，它还允许在结果中保留换行符，并在您已经将模板文字标签用于其他内容时提供功能：https://github.com/iansan5653/compress-tag

---

我知道我在这里回答迟到了，但是接受的答案仍然存在不允许在换行后缩进的缺点，这意味着您仍然不能仅通过转义换行符来编写非常漂亮的代码。

相反，为什么不使用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.`;

如果未来的开发人员不习惯标记模板语法或者如果您不使用描述性函数名称，这确实有可能出现意外行为的缺点，但它现在感觉是最干净的解决方案。

【参考方案6】：

使用旧的和新的。模板字面量很棒，但如果你想避免冗长的字面量以便拥有紧凑的代码行，请将它们连接起来，ESLint 不会引起大惊小怪。

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

【参考方案7】：

类似于Doug's answer，这被我的 TSLint 配置所接受，并且不受我的 IntelliJ 自动格式化程序的影响：

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

【参考方案8】：

我参加聚会有点晚了，但对于这个问题的任何未来访问，我发现这个灵魂对我的用例来说是最优化的。

我正在运行一个 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>"

【参考方案9】：

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

【参考方案10】：

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

import  oneLine  from 'common-tags';

const foo = oneLine`foo
bar
baz`;

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

【参考方案11】：

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

#yourTextContainer 
  white-space: pre-line;