Question

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

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:

我的期望：

challengeHandler

Answer 1

这太疯狂了。

这里几乎每个答案都建议运行一个函数运行时，以便格式化，构建时间格式错误的文本oO我是唯一一个被这个事实震惊的人，特别是性能影响???

如@dandavis所述，official solution（其中btw也是unix shell脚本的历史解决方案）是使用espace字符来表示回车符：\ < / p>

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

过程中简单，高效，官方，可读和类似shell

Answer 2

换行符是换行符...如果您手动生成它们，我发现您可以在运行时获得它们。

BTW，我现在找到三个解决方法：

配置您的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,"");

警告：此处您正在运行运行时功能来格式化构建时间代码，这可能看起来像反模式，并且会影响性能

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

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 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')标记以获得所需结果。

有关上述常用标记链接以及this blog

的更多信息

Answer 4

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

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 5

要么配置IDE进行换行，然后使用模板字符串1-liner，就像您的第一个代码段一样。
要么在换行符之前使用\转义文字char。

示例：
```
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`;

第一种方法更好，原因是：

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

Answer 6

对于段落，您可以使用\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);

Answer 7

在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坐满，礼节高涨。Duisid urnaligula。Suspendisselobortis ex utvesibulumvenenatis。Donecimperdiet ante dioo，nec malesuada diam tristique eget。Lorem ipsum dolor坐位，在无知的特鲁斯中。”

模板字符串ES6可防止换行

7 个答案: