Question

我将我的多行变量更改为Template Literals并且令人惊讶，但后来我注意到我所做的缩进被缩进（缩小）到\n并带有缩进I在原始代码上做了。我怎么能避免这种情况？

例如：

var $div = $(`<div class='proj' id='projects'>
                 <div class='bot-nav'>${txt}</div>
           </div>`);

它转换为：

var $div = $("<div class='proj' id='projects'>\n                 <div class='bot-nav'>"+txt+"</div>\n           </div>");

我想要这个：

var $div = $("<div class='proj' id='projects'><div class='bot-nav'>"+txt+"</div></div>");

有没有办法做到这一点？

Answer 1

虽然使用.replace（如其他答案中建议的那样）会起作用，但这并不是一种很酷的新方式;）

我认为您正在寻找的是ES2015中引入的文字标签功能（又名“标签模板”）。

这里有很多人：

https://github.com/declandewet/common-tags

你可能想要oneLine（或oneLineTrim）：

oneLine`
  foo
  bar
  baz
`
// "foo bar baz"

注意：oneLine显然在内部使用replace。

Answer 2

let literal = `template     literal
               string so many holes`;

literal.replace(/\s+/g, ' ');

这将用一个空格替换一个或多个空格。

Answer 3

您可以使用String.prototype.replace()方法删除它们之后的所有新行和空格：

var $div = $(`<div class='proj' id='projects'>
                 <div class='bot-nav'>${txt}</div>
           </div>`.replace(/\n\s+/g, ''));

Answer 4

要删除前导空格和尾随空格，请使用.replace

要删除换行符，您可以拆分/加入

var $div = $(`<div class='proj' id='projects'>
             <div class='bot-nav'>${txt}</div>
       </div>`.replace(/^\s+|\s+$/gm, '').split('\n').join(''));

或制作一个功能

function someFunctionName(str) {
    return str.replace(/^\s+|\s+$/gm, '').split('\n').join('')
}

var $div = $(someFunctionName(`<div class='proj' id='projects'>
             <div class='bot-nav'>${txt}</div>
       </div>`));

ES6模板文字 - 从字符串中删除\ n

4 个答案: