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

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

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 2

这太疯狂了。

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

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

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

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

Answer 3

在 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在 vulputatetellus 中。”

Answer 4

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

• 要么配置 IDE 进行包装，要么使用模板字符串 1-liner，就像在你的第一个代码 sn-p 中一样。

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

  示例：

  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

如果你有 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:        
`

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

有关上述通用标签链接以及this blog的更多信息

Answer 7

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

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

1. 将您的 IDE 或代码编辑器配置为自动换行，这样如果您不需要它们，您就无需在代码中添加换行符：您的编辑器会将您的代码分成两行或多行，如果每行代码语句超出了配置的最大字符数。

2. 用String.prototype.replace删除换行符：

var string = `因为模板字符串中的所有字符串替换都是 JavaScript 表达式，我们可以替换的不仅仅是变量名。 例如，下面我们可以使用表达式插值来 嵌入一​​些可读的内联数学：`.replace(/\n/gm,"");

注意：这里您正在运行一个函数 runtime 来格式化您的 buildtime 代码，这可能看起来像一种反模式，并且会影响性​​能

1. 使用串联执行这些代码换行符：

var string = `因为模板字符串中的所有字符串替换都是 JavaScript` + `表达式，我们可以替换的不仅仅是变量名。` + `例如下面我们可以使用表达式插值来` + `嵌入一些可读的内联数学：`;

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

Answer 8

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

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