模板字符串 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:

Answer 1

换行符就是换行符...如果您手动生成它们，我发现您在运行时间内得到它们是非常令人期待的。

顺便说一句，我现在找到三个解决方法：

将您的 IDE 或代码编辑器配置为自动换行，这样您就无需在不需要的代码中添加换行符：您的编辑器会破坏您的如果每个代码句子超出配置的最大字符数，则代码分两行或更多行。
用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,"");

注意：此处您运行正在使用函数 运行time 来格式化您的 buildtime 代码，这可能看起来像反模式，并且会影响性能

使用连接执行这些代码换行符：

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

就我而言，我会选择 #1 选项。

Answer 2

我个人更喜欢连接数组的外观：

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

Answer 3

如果你有ES6，你可以使用标签。例如，the stripIndent tag from the common-tags library:

安装方式：

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') 标签以获得您想要的结果。

有关上述 common-tags link 以及 this blog

的更多信息

Answer 4

这太疯狂了。

这里几乎每个答案都建议运行函数 runtime 以便 well-format、buildtime bad-formatted text oO 我是唯一一个对这一事实感到震惊的人吗，尤其是对性能的影响？？？

如@dandavis 所述，official solution（顺便说一下，这也是 unix shell 脚本的历史解决方案）是为了逃避马车 return，嗯，转义符：\

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

简单、高效、官方、可读，并且shell-like在过程中

Answer 5

配置 IDE 进行换行并使用模板字符串 1-liner，如第一个代码片段中所示。
在换行符之前使用 \ 转义文字字符。

示例：
```
const string = `1st line\
2nd line\ 
3rd line`; 
```
但它不会使您免于 space-对齐问题。

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

示例：

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

要么使用 hack 模板空字符串 var ${''}:

示例：

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

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

较少符号（大小方面）
无运行时操作（性能方面）

Answer 6

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

/\s{2}/g 是一个正则表达式，选择两个或更多 back-to-back 个空格的任何实例。

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."

Answer 7

对于段落，您可以使用 \s+ 正则表达式将白色 space 替换为单个 space，这样它就可以用于换行和缩进。因此，对于您的情况，只需在末尾添加 .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);

Answer 8

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


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."

模板字符串 ES6 防止换行

Template Strings ES6 prevent line breaks

javascript

ecmascript-6

template-strings