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

Question

我正在将我的多行变量转换为 模板字符串，效果非常棒。但是我发现我所缩进的空格被转化成了\n，从而对原始代码中的缩进造成了影响。有什么方法可以避免这种情况呢？

例如：

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>");

有没有办法做到这一点？

- sandrina-p

---

有什么区别吗？在这两种情况下，DOM 是相同的。 - Barmar

它使得编译后的 file.js 变得比预期更大。 - sandrina-p

几乎，但并不完全是文本节点。 - user1106925

如果您不想要有新行，那就不要使用模板字符串，毕竟这就是它们的目的。 - dfsq

.replace(/^\s+|\s+$/gm, '').split('\n').join('') - Jaromanda X

Answer 1

虽然使用.replace（像其他答案中建议的那样）可以正常工作，但这不是最新、最酷炫的方法 ;)

我认为你正在寻找一个字面标签函数（又称“标记模板”），它在ES2015中被引入。

这里有一堆：

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

你可能想要使用oneLine（或oneLineTrim）：

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

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

- Liel

---

我不确定我是否知道如何使用这个。我在index.js的第一行添加了import stripIndent from '/node_modules/common-tags/lib/stripIndent';，但是在控制台上出现了10Uncaught SyntaxError：Unexpected token import。我错过了什么？我正在使用gulp作为任务运行器。 - sandrina-p

我猜你没有设置Babel？这是common-tags的第三个要求 - http://babeljs.io/ - Liel

我有一个gulp任务，按照以下顺序处理脚本：babel、stripDebug、uglify、gutil cached和rename。 - sandrina-p

你有babel的2015预设吗？http://babeljs.io/docs/plugins/preset-es2015/MDN还建议其他编译器： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import - Liel

是的，我有，在 gulp 任务中有这个：.pipe(babel({ presets: ["es2015-script"], compact: false //using uglify })) - sandrina-p

Answer 2

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

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

这将把一个或多个空格替换为一个空格。

- Seyi Adekoya

Answer 3

您可以使用 String.prototype.replace() 方法来删除所有换行符及其后面的空格：

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

- Michał Perłakowski

---

他还想要替换掉换行符后面的空格。 - Barmar

@SandrinaPereira 抱歉，在互联网上没有人知道你是女孩。 - Barmar

Answer 4

要删除前导和尾随的空格，您可以使用.replace

要删除换行符，您可以使用split/join

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>`));

- Jaromanda X