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

Wrap long template literal line to multiline without creating a new line in the string

提问by Ville Miekk-oja

In es6 template literals, how can one wrap a long template literal to multiline without creating a new line in the string?

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

For example, if you do this:

例如，如果您这样做：

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

Then it will create a new line symbol to the string, as interpreting it to have a new line. How can one wrap the long template literal to multiple lines without creating the newline?

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

回答by CodingIntrigue

If you introduce a line continuation(\) at the point of the newline in the literal, it won't create a newline on output:

如果在文字中的换行符处引入换行符( \)，则不会在输出上创建换行符：

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

回答by Monte Jones

This is an old one. But it came up. If you leave any spaces in the editor it will put them in there.

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

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

just do the normal + symbol

只是做正常的+符号

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

回答by Doug Coburn

You could just eat the line breaks inside your template literal.

您可以只吃模板文字中的换行符。

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

回答by Ian

EDIT: I've made an tiny NPM module with this utility. It works on web and in Node and I highly recommend it over the code in my below answer as it's far more robust. It also allows for preserving newlines in the result if you manually input them as \n, and provides functions for when you already use template literal tags for something else: https://github.com/iansan5653/compress-tag

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

---

---

I know I'm late to answer here, but the accepted answer still has the drawback of not allowing indents after the line break, which means you still can't write very nice-looking code just by escaping newlines.

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

Instead, why not use a 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;
}

Then you can just tag any template literal you want to have line breaks in:

然后你可以标记任何你想要换行的模板文字：

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

This does have the drawback of possibly having unexpected behavior if a future developer isn't used to the tagged template syntax or if you don't use a descriptive function name, but it feels like the cleanest solution for now.

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

回答by Liran H

Another option is to use Array.join, like so:

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

回答by Raymond Wachaga

Use the old and the new. Template literals are great but if you want to avoid lengthy literals so as to have compact lines of code, concatenate them and ESLint won't cause a fuss.

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

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

回答by Daniel K

Similar to Doug's answerthis is accepted by my TSLint config and remains untouched by my IntelliJ auto-formatter:

与Doug 的回答类似，这被我的 TSLint 配置接受，并且我的 IntelliJ 自动格式化程序保持不变：

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

回答by Danielo515

The solution proposed by @CodingIntrigue is not working for me on node 7. Well, it works if I do not use a line continuation on the first line, it fails otherwise.

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

This is probably not the best solution, but it works without problems:

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

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