javascript - 连接模板文字时出现奇怪的错误

Question

我正在尝试构建一个 javascript 脚本，它将我的 header 调整到我的 html 页面，这样我就不必在进行更改时更新我的​​每个页面。我了解到模板文字可以在变量中保存 html 代码，所以我开始使用它。但是，当我使用三元运算符时，我在 VS Code 中弹出错误。它说我缺少一个 )。

我已经检查了整个模板文字是否缺少括号。

var html = `<div id="branding">
    <h1><span class="btop">JoJo</span> <span class="bbottom">Studios</span></h1>
</div>
<nav>
    <ul>
        <li`+(page=="home" ? ` class="current><a href="#">Home</a>"` : `><a href="../">Home</a>`)+`</li>
        <li`+(page=="games" ? ` class="current"` : ``)+`>
            <div class="dropdown">
                <a href=`+(page=="games" ? `"./"` : (page=="home" ? `"games/"` : `"../games/"`)+`>Games</a>
                <div class="dropdown-content">
                    <a href=`+(page=="games" ? `"` : (page=="home" ? `"games/` : `"../games/`)+`jojobananacatch.html">JoJo Banana Catch</a>
                </div>
            </div>
        </li>
        <li`+(page=="play" ? ` class="current"` : ``)+`><a href=`+(page=="home" ? `"play/"` : `"../play/"`)+`>Play</a></li>
        <li`+(page=="videos" ? ` class="current"` : ``)+`><a href=`+(page=="home" ? `"videos/"` : `"../videos/"`)+`>DevLogs & More</a></li>
        <li`+(page=="about" ? ` class="current"` : ``)+`><a href=`+(page=="home" ? `"about/"` : `"../about/"`)+`>About</a></li>
        <li`+(page=="contact" ? ` class="current"` : ``)+`><a href=`+(page=="home" ? `"contact/"` : `"../contact/"`)+`>Contact</a></li>
        <li`+(page=="account" ? ` class="current"` : ``)+`><a href=`+(page=="home" ? `"account/account.php?account_forward=0"` : `"../account/account.php?account_forward=0"`)+`>Account</a></li>
    </ul>
</nav>`;

输出应该只是一个我可以插入到文档中的字符串。任何帮助将不胜感激。

Answer 1

dropdown 类中的部分是问题所在，您显然使用了两个嵌套的三元运算符，但只有一个右括号。

改变

<a href=`+(page=="games"
           ? `"./"`
           : (page=="home"
              ? `"games/"`
              : `"../games/"`)+`>Games</a>

到

<a href=`+(page=="games"
           ? `"./"`
           : (page=="home"
              ? `"games/"`
              : `"../games/"`))+`>Games</a>

第二个也是一样。

顺便说一句，您还可以在模板中直接使用表达式(这就是模板的全部意义所在)。

这是使用 ${...} 语法完成的，这种语法在某些情况下可能比关闭和重新打开模板更容易阅读。例如:

let s = "World";
console.log(`Hello, ${s+"."}`)

记录 Hello, World.