javascript - 模板字符串 ES6 防止换行

Question

我有一个长字符串，我使用 ES6 模板字符串构建它，但我希望它没有换行符：

var string = `As all string substitutions in Template Strings are JavaScript
              expressions, we can substitute a lot more than variable names.
              For example, below we can use expression interpolation to 
              embed for some readable inline math:`

console.log(string);

结果：

As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:

我的期望：

As all string substitutions in Template Strings are JavaScript expressions, we can substitute a lot more than variable names. For example, below we can use expression interpolation to embed for some readable inline math:

score 127 · Accepted Answer

疯了吧。

几乎这里的每个答案都建议运行一个函数运行时以便格式化，构建时格式错误的文本oO我是唯一一个对此事实感到震惊的人，尤其是性能影响？

正如@dandavis 所说，官方解决方案（顺便说一句，这也是 unix shell 脚本的历史解决方案）是使用转义字符转义回车：\

`foo \
bar` === 'foo bar'

过程简单、高性能、官方、可读、类shell

score 33 · Accepted Answer

A line break is a line break... If you produce them manually, I find very expectable that you get them during run-time.

BTW, I find three workarounds for now:

Configure your IDE or code editor to do word wrap so you won't need to add line breaks in your code if you don't need them: your editor will break your code in two or more lines if each code sentence goes beyond configured maximum characters.
Remove line breaks with String.prototype.replace:

var string = `As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:`.replace(/\n/gm,"");

Caution: here you're running a function runtime to format your buildtime code, which might look like an anti-pattern, and have performance impact

Perform these code line breaks using concatenations:

var string = `As all string substitutions in Template Strings are JavaScript`
              + `expressions, we can substitute a lot more than variable names.`
              + `For example, below we can use expression interpolation to` 
              + `embed for some readable inline math:`;

In my case, I would go with #1 option.

score 24 · Accepted Answer

如果你有 ES6，你可以使用标签。例如，来自 common-tags 库的 stripIndent 标签：

通过以下方式安装：

npm install common-tags --save

要求通过：

const stripIndent = require('common-tags/lib/stripIndent')

用于：

stripIndent`
  As all string substitutions in Template Strings are JavaScript
  expressions, we can substitute a lot more than variable names.
  For example, below we can use expression interpolation to
  embed for some readable inline math:        
`

编辑：如评论中所述，您可能需要选择：const oneLine = require('common-tags/lib/oneLine')标签以获得所需的结果。

有关上述通用标签链接以及此博客的更多信息

score 17 · Accepted Answer

将 IDE 配置为进行包装并使用模板字符串 1-liner，就像在您的第一个代码片段中一样。
\在换行符之前使用转义文字字符。

例子：
```
const string = `1st line\
2nd line\ 
3rd line`; 
```
但它不会让你摆脱空间对齐的问题。

要么使用带有“+”的老式 ES5 连接。

例子：

const string = '1st line' + 
               '2nd line' + 
               '3rd line';

使用带有模板空字符串 var ${''} 的 hack：

例子：

const string = `1st line${'' 
               }2nd line${'' 
               }3rd line`;

第一种方法要好得多，原因是：

更少的符号（大小方面）
没有运行时操作（性能方面）

score 13 · Accepted Answer

我个人更喜欢加入数组的外观：

var string = [
  `As all string substitutions in Template Strings are JavaScript`,
  `expressions, we can substitute a lot more than variable names.`,
  `For example, below we can use expression interpolation to`,
  `embed for some readable inline math:`
].join(' ');

score 3 · Accepted Answer

对于段落，您可以使用\s+正则表达式将空格替换为单个空格，以便它适用于换行符和缩进。所以，在你的情况下，只需.replace(/\s+/gm, ' ')在最后添加。

var string = `As all string substitutions in Template Strings are JavaScript
              expressions, we can substitute a lot more than variable names.
              For example, below we can use expression interpolation to 
              embed for some readable inline math:`.replace(/\s+/gm, ' ');

console.log(string);

score 1 · Accepted Answer

虽然这不是模板字符串的典型用法，但值得一提。您可以只使用字符串插值，它可以像这样简单


const str = `some long text on ${
    "multiple" } lines without any extra ${
    "spaces" } or line breaks and readable.`;

console.log(str);
// "some long text on multiple lines without any extra spaces or line breaks and readable."

score 0 · Accepted Answer

在 ES6 中，我更喜欢在这里使用两个最佳答案\的组合（结合.replace()）。将替换功能与转义字符相结合的好处意味着您可以保持代码块与其余代码的格式一致。

/\s{2}/g是选择两个或多个背靠背空格的任何实例的正则表达式。

const myMessage = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id urna \
    ligula. Suspendisse lobortis ex ut vestibulum venenatis. Donec imperdiet ante odio, \
    nec malesuada diam tristique eget. Lorem ipsum dolor sit amet, consectetur adipiscing \
    elit. Cras in vulputate tellus.`
  .replace(/\s{2,}/g, "");

这会输出一个普通的、完整的字符串。

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id urna ligula. Suspendisse lobortis ex ut vestibulum venenatis. Donec imperdiet ante odio, nec malesuada diam tristique eget. Lorem ipsum dolor sit amet, consectetur elit. Cras in vulputate tellus。”

javascript - 模板字符串 ES6 防止换行

8 回答 8

Related

Reference