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

这太疯狂了。

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

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

\

`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,"");

警告：这里您正在运行一个函数 runtime 来格式化您的 buildtime 代码，这可能看起来像反模式，并且会对性能产生影响

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

标签来实现您想要的结果。

有关上述常见标签链接以及此博客

的更多信息

Answer 4

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

• 在换行符之前使用

  \

  转义文字字符。

  示例：

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

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

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

Answer 5

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

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 6

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

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

Answer 7

对于段落，您可以使用

\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);