多行字符串，无效或意外的令牌

Question

我试图通过构建一个将附加到文档头部的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的行上，我收到错误：Uncaught SyntaxError: Invalid or unexpected token。任何人都可以帮我弄清楚我做错了什么吗？

这是我的IDE用于语法高亮参考的图片：

Answer 1

var cssString = "* {margin: 0;padding: 0;} \ 

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

P.S。作为附注，如下面的问题所述，使用不同的东西然后逃避可能是好的：

Creating multiline strings in JavaScript

Answer 2

试试这个：

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