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

疯了吧.

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

正如@dandavis所说,官方解决方案(其中btw也是unix shell脚本的历史解决方案)是使用espace字符来确定回车符:\

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

这个过程中简单,高效,官方,可读和类似shell

Answer 2

换行符是一个换行符...如果你手动生成它们,我发现你很有可能在运行期间得到它们.

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

1. 配置您的IDE或代码编辑器进行自动换行,这样您就不需要在代码中添加换行符了:如果每个代码语句超出配置的最大值,编辑器将在两行或多行中断开代码字符.

2. 删除换行符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,"");

警告:在这里,您正在运行一个函数运行时来格式化您的构建时代码,这可能看起来像一个反模式,并且会影响性​​能

3. 使用连接执行这些代码换行符:

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,则可以使用标签.例如,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')标记以获得所需的结果.

有关上述common-tags链接以及此博客的更多信息

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

• 如第1个代码段中所示，将IDE配置为进行换行并使用模板字符串1-liner。

• 请\在换行符之前使用转义文字char。

  例：

  const string = `1st line\
  2nd line\ 
  3rd line`; 
  

  但这不会使您摆脱空间对齐问题。

• 要么将老式的ES5串联与“ +”一起使用。

  例：

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

• 将hack与模板空字符串var $ {''}一起使用：

  例：

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

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

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