JavaScript模板字面量内赋值操作的合法性及相关官方规范咨询

假设我有一个函数，它需要根据第二个参数是否提供且为true，返回包含<h1>或<h2>的HTML字符串。我能不能像下面这样写代码？（注意我是在模板字符串内部给level赋值，然后在结束标签里复用这个赋值后的结果。）

function heading(str, level) {
    return `<h${level = level ? '1' : '2'}>${str}</h${level}>`
}

我当然知道更稳妥的写法是先在单独的行给level赋值，再在模板字面量里使用它。

我的疑问是：

• 这种赋值操作在模板字面量里是被允许的吗？
• 有没有官方文档或标准对此做了说明？

我在MDN或其他渠道都没找到任何提到模板字面量内可以进行赋值操作的文档，不过自己测试下来这种写法完全能正常运行，只是……

首先直接给你明确答案：这种写法完全合法。

为啥呢？其实模板字面量里的${}占位符，本质上就是用来嵌入任意合法的JavaScript表达式的。赋值表达式本身就是JS里正经的表达式类型——它不仅会完成赋值操作，还会返回被赋予的值，所以你在占位符里写level = level ? '1' : '2'这种逻辑，完全符合语法规则。

关于官方规范的部分，ECMAScript（也就是JavaScript的官方标准）里对模板字面量的定义非常明确：模板字面量的替换项（就是${}包裹的部分）的语法要求是“Expression”，而赋值表达式（AssignmentExpression）属于表达式的一个子集，自然被包含在内。

不过这里也得提一句，虽然语法上没问题，但从代码可读性和维护性来说，你说的“先单独赋值再用”确实是更优的写法。毕竟如果后续有人读你的代码，看到模板字符串里突然冒出来一个赋值操作，可能得反应一下才能理清逻辑，单独提前赋值的话，逻辑会更直白清晰。

备注：内容来源于stack exchange，提问作者zrajm