Javascript 多行字符串，无效或意外标记

我试图通过构建一个附加到文档头部的css字符串来动态地将css添加到页面中。由于此字符串很长，我想在编辑器中将其拆分为多行，因此我执行以下操作：

function generateCss(colors){
    var cssString = "* {margin: 0;padding: 0;} \ 
        #mainWrapper {width: 100vw;height: 100vh;background-color:#"+ colors['background'] + ";} \
        #mainWrapper div {height: 2vw;} \
        .cell {width: 2vw;background-color:#"+ colors['color1'] + ";display: inline-block;} \
        .active {background-color:#"+ colors['color2'] +" !important;}";
    console.log(cssString);
}

但是，在我创建

cssString

的行上，我得到了错误：

未捕获的语法错误：无效或意外的标记

。谁能帮我找出我做错了什么

这是我的IDE图片，用于语法突出显示参考：

试试这个：

function generateCss(colors){
    var cssString = `* {margin: 0;padding: 0;}
        #mainWrapper {width: 100vw;height: 100vh;background-color:#${colors['background']};}
        #mainWrapper div {height: 2vw;}
        .cell {width: 2vw;background-color:#${colors['color1']};display: inline-block;}
        .active {background-color:#${colors['color2']}!important;}`;
    console.log(cssString);
}

试试这个：

function generateCss(colors){
    var cssString = `* {margin: 0;padding: 0;}
        #mainWrapper {width: 100vw;height: 100vh;background-color:#${colors['background']};}
        #mainWrapper div {height: 2vw;}
        .cell {width: 2vw;background-color:#${colors['color1']};display: inline-block;}
        .active {background-color:#${colors['color2']}!important;}`;
    console.log(cssString);
}

请注意，字符串末尾有一个额外的空格。这就造成了问题

另外，作为一个旁注，在使用中使用与转义不同的东西可能是好的，如以下问题所述：

请注意，字符串末尾有一个额外的空格。这就造成了问题

另外，作为一个旁注，在使用中使用与转义不同的东西可能是好的，如以下问题所述：

---

我将斜杠移近了实际文本，但仍然得到相同的错误不是前导空格，你在“\”字符后面有一个空格：“s\s”，必须是“s”。我将斜杠移近了实际文本，仍然得到相同的错误不是前导空格，你在“\”字符后面有一个空格：“s\s”，必须是“s”他为什么要试试这个？解释你改变了什么以及为什么。别忘了提到它在旧浏览器上不起作用，因为这是一个非常新的Javascript特性。他为什么要尝试这个呢？解释你改变了什么以及为什么。别忘了提到它不能与旧浏览器一起使用，因为这是一个非常新的Javascript特性。