在es6模板文字中,如何在不创建新行的情况下将长模板文字包装成多行?
例如,如果您这样做:
const text = `a very long string that just continues
and continues and continues`
然后,它将为该字符串创建一个新行符号,以解释它具有新行。如何在不创建换行符的情况下将长模板文字包装到多行?
在es6模板文字中,如何在不创建新行的情况下将长模板文字包装成多行?
例如,如果您这样做:
const text = `a very long string that just continues
and continues and continues`
然后,它将为该字符串创建一个新行符号,以解释它具有新行。如何在不创建换行符的情况下将长模板文字包装到多行?
Answers:
如果您在文字中的换行符处引入换行符(\
),则不会在输出中创建换行符:
const text = `a very long string that just continues\
and continues and continues`;
console.log(text); // a very long string that just continuesand continues and continues
and continues...
必须从新行的第0个位置开始,打破缩进规则。
您可以只吃模板文字中的换行符。
// Thanks to https://twitter.com/awbjs for introducing me to the idea
// here: https://esdiscuss.org/topic/multiline-template-strings-that-don-t-break-indentation
const printLongLine = continues => {
const text = `a very long string that just ${continues}${''
} and ${continues} and ${continues}`;
return text;
}
console.log(printLongLine('continues'));
prettier
在IDE中配置了漂亮的格式化程序(如),它就会失败。prettier
将其包装回单行。
编辑:我已经使用此实用程序制作了一个很小的NPM模块。它可以在Web和Node上运行,我强烈建议在下面的答案中使用它,因为它的功能更强大。如果您手动将换行符输入为\n
,它还可以保留结果中的换行符,并为您已经将模板文字标签用于其他用途提供功能:https : //github.com/iansan5653/compress-tag
我知道我在这里迟到答案了,但是被接受的答案仍然具有在换行符后不允许缩进的缺点,这意味着您仍然不能仅通过转义换行符来编写看起来很漂亮的代码。
相反,为什么不使用带标签的模板文字函数呢?
function noWhiteSpace(strings, ...placeholders) {
// Build the string as normal, combining all the strings and placeholders:
let withSpace = strings.reduce((result, string, i) => (result + placeholders[i - 1] + string));
let withoutSpace = withSpace.replace(/\s\s+/g, ' ');
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.`;
如果将来的开发人员不习惯使用标记的模板语法,或者如果您不使用描述性的函数名称,那么这样做确实可能会产生意外行为,但感觉这是目前最干净的解决方案。
使用旧的和新的。模板文字很不错,但是如果要避免使用冗长的文字以使代码行紧凑,请将它们串联起来,ESLint不会引起大惊小怪。
const text = `a very long string that just continues`
+` and continues and continues`;
console.log(text);