es6 多行模板字符串，没有新行并允许缩进

Question

最近大部分工作都越来越多地使用 es6。一个警告是模板字符串。

我喜欢将我的行字符数限制为 80。因此，如果我需要连接一个长字符串，它可以正常工作，因为连接可以是多行，如下所示：

const insert = 'dog';
const str = 'a really long ' + insert + ' can be a great asset for ' +
  insert + ' when it is a ' + dog;

但是，尝试使用模板文字执行此操作只会给您一个多行字符串，其中 ${insert} 将 dog 放在结果字符串中。当您想将模板文字用于 url 程序集等

时并不理想

我还没有找到一个好方法来保持我的行字符限制并仍然使用长模板文字。有人有什么想法吗？

另一个标记为已接受的问题只是部分答案。下面是我之前忘记包含的模板文字的另一个问题。

使用换行符的问题在于，如果不在最终字符串中插入空格，则不允许缩进。即

const insert = 'dog';
const str = `a really long ${insert} can be a great asset for\
  ${insert} when it is a ${insert}`;

生成的字符串如下所示：

a really long dog can be a great asset for  dog when it is a dog

总的来说这是一个小问题，但如果有允许多行缩进的修复程序会很有趣。

Answer 1

这个问题有两个答案，但只有一个可能被认为是最优的。

在模板字面量中，javascript 可以用在像 ${} 这样的表达式中。因此，可以缩进多行模板文字，如下所示。警告是表达式中必须存在一些有效的 js 字符或值，例如空字符串或变量。

const templateLiteral = `abcdefgh${''
  }ijklmnopqrst${''
  }uvwxyz`;

// "abcdefghijklmnopqrstuvwxyz"

此方法使您的代码看起来像废话。不推荐。

第二种方法是由@SzybkiSasza 推荐的，似乎是可用的最佳选择。出于某种原因，我并没有尽可能地想到连接模板文字。我很蠢。

const templateLiteral = `abcdefgh` +
  `ijklmnopqrst` +
  `uvwxyz`;

// "abcdefghijklmnopqrstuvwxyz"

Answer 2

为什么不使用 tagged template literal function？

function noWhiteSpace(strings, ...placeholders) {
  let withSpace = strings.reduce((result, string, i) => (result + placeholders[i - 1] + string));
  let withoutSpace = withSpace.replace(/$\n^\s*/gm, ' ');
  return withoutSpace;
}

然后你可以标记任何你想要换行的模板文字：

let myString = noWhiteSpace`This is a really long string, that needs to wrap over
    several lines. With a normal template literal you can't do that, but you can 
    use a template literal tag to allow line breaks and indents.`;

提供的函数将去除所有换行符和行前制表符和空格，产生以下内容：

> This is a really long string, that needs to wrap over several lines. With a normal template literal you can't do that, but you can use a template literal tag to allow line breaks and indents.

es6 多行模板字符串，没有新行并允许缩进

es6 multiline template strings with no new lines and allow indents

javascript

ecmascript-6

template-literals