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}将狗放置在结果字符串中。当您想要将模板文字用于诸如url assembly等之类的东西时，这并不理想。

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

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

使用新行字符的问题在于它不允许缩进而不在最终字符串中插入空格。即。

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推荐的，似乎是最好的选择。由于某种原因，连接模板文字并没有尽可能地发生在我身上。我是derp。

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多行模板字符串，没有新行，允许缩进

2 个答案: