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

在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

---

@codingitrigue提出的解决方案在节点7上对我不起作用。如果我不在第一行使用行继续符，它会工作，否则它会失败

这可能不是最好的解决方案，但它可以毫无问题地工作：

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

---

这是一个旧的。但是它出现了。如果您在编辑器中留下任何空格，它将把它们放在那里

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

---

您可以直接在模板文本中使用换行符

//感谢https://twitter.com/awbjs 谢谢你给我介绍这个想法
//在这里：https://esdiscuss.org/topic/multiline-template-strings-that-don-t-break-indentation
const printLongLine=继续=>{
const text=`一个非常长的字符串，只有${continues}${'
}和${continues}和${continues}`；
返回文本；
}
console.log（printLongLine（'continues'）编辑：我用这个工具制作了一个小型NPM模块。它可以在web和Node中工作，我强烈推荐它，而不是下面答案中的代码，因为它更健壮。如果您以
\n
的形式手动输入换行符，它还允许保留结果中的换行符，并在您已将模板文字标记用于其他内容时提供以下功能：


我知道我在这里回答得太晚了，但公认的答案仍然有一个缺点，即换行后不允许缩进，这意味着您仍然无法通过转义换行来编写非常好看的代码

相反，为什么不使用一个

然后，您可以只标记任何要换行的模板文字：

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

如果未来的开发人员不习惯标记的模板语法，或者如果您不使用描述性函数名，那么这确实有可能出现意外行为的缺点，但现在感觉它是最干净的解决方案
 使用旧的和新的。模板文本非常好，但如果您希望避免冗长的文本，以便代码行紧凑，请将它们连接起来，ESLint不会引起麻烦

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

与此类似，我的TSLint配置也接受了这一点，并且我的IntelliJ自动格式化程序不会对此进行更改：

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

我参加聚会有点晚了，但是对于以后关于这个问题的访问，我发现这个解决方案最适合我的用例

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


我的回应对象：

const httpResponse={
信息：“Lorem ipsum dolor sit amet，献身于和平的精英们。祈祷和祈祷。不要告诉我直径。你是奥古斯，你是奥纳威尔，你是土耳其人。”，
html:`
Lorem ipsum dolor sit amet，是一位杰出的献身者

这是一个很好的选择


Donec非大地直径
杜伊斯马萨奥古斯酒店

`,
}

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

{
“信息”：“Lorem ipsum dolor sit amet，concetetur adipiscing elit.present ultrices et odio eget blandit.Donec non tellus diam.Duis masa augue，cursus a ornare vel，pharetra ac turpis.”，
“html:“\n\t\tLorem ipsum door sit amet，concetetur adipsicing elite.
\n\t\t为您提供最好的服务，并为您提供最棒的服务。
\n\t\t
\n\t\t
不要使用非大地直径
\n\t\t\t
在8月份的马萨
\n\t\t

这当然很难看，也很难处理。因此，在发送http之前，我会修剪字符串的每一行

httpResponse.html=httpResponse.html.split（'\n'）.map（line=>line.trim（））.join（“”）

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

{
“信息”：“Lorem ipsum dolor sit amet，concetetur adipiscing elit.present ultrices et odio eget blandit.Donec non tellus diam.Duis masa augue，cursus a ornare vel，pharetra ac turpis.”，
“html:“知识产权，尊敬的精英。
不使用直径
在奥古斯都教堂举行婚礼。”
}
如果您的问题正好相反，您需要保留换行符，但由于某些原因，它们没有得到遵守，只需在文本容器中添加css属性：

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

此软件包允许您执行以下操作

import { oneLine } from 'common-tags';

const foo = oneLine`foo
bar
baz`;

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

我不太明白你的意思。你能提供一个吗？在我的例子中不容易，因为不同的变量取自coffeescript配置文件等。。嗯。。它似乎可以在其他情况下工作，但由于某些原因，它会在其中添加空白。如果您在第一行上使用行继续符，它对我不起作用（节点v7）。如果您在测试中使用它，有时它不会返回相同的字符串。我已经用它解决了我的难题，它只是一个
1.1k Airbnb库
。这个解决方案不能很好地处理缩进（缩进在开发中很常见）。新行中\后面的字符必须是该行的第一个字符。也就是说，
和continues…
必须从新行的第0个位置开始，这违反了缩进规则。FWIW行的连续体很难阅读，而且对于意外的空格很脆弱，因此我更喜欢Monte Jones解决方案，而不是CodingTrigue解决方案。FWIW谷歌风格的指南Monte Jones解决方案和AirBnB指南只是使用了一条很长的线——也就是说，两者都不推荐
#yourTextContainer {
  white-space: pre-line;
}

import { oneLine } from 'common-tags';

const foo = oneLine`foo
bar
baz`;

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