HTML linting 错误（',' 预期的 javascript），但遵循建议会破坏代码

Question

我正在制作一个小型烧瓶应用程序（并且对 html 非常陌生），并且有一个让我困惑的 linting 错误。在我的 html 文件中我有这个：

<button onclick="copyText('{{ results['s'] }}')">Copy to clipboard</button> 

<script>
    function copyText(txt) {
        // copy txt into clipboard 
        // put txt in format '{{ TXT }}' if you want the value of the variable not a string literal
        navigator.clipboard.writeText(txt);
    }
</script>

行

'{{ results['s'] }}'

带有红色下划线，vscode 两次显示“','预期的 javascript”，分别在 s 之前和 s 之后。 （意思是要摆脱我必须写的错误

'{{ results[',s,'] }}'

）。

我尝试添加逗号来修复 linting 错误，但这破坏了我的代码，并且当我运行 Flask 应用程序时按钮不起作用。我还尝试在按钮行之前添加

<!-- vscode-disable-next-line -->

（按照 chatGPT 的建议），但这对 linting 错误没有影响。

真的，我只是想知道为什么会出现错误以及如何消除它。谢谢！

Answer 1

您遇到错误是因为您使用嵌套的

''

引号符号，在这种情况下，JS 不知道您的字符串应该在哪里开始/结束。

为了避免处理嵌套引号，您可以使用模板文字（模板字符串），这将允许像这样编写表达式以避免语法错误。

onclick="copyText(`{{ results['s'] }}`);"