JavaScript中typeof运算符删除操作数后运行结果异常咨询

原始测试代码 #

<!DOCTYPE html>
<html>
<body>
  <h2>JavaScript Strings</h2>
  <p id="demo"></p>
  <script>
    // x 为字符串字面量
    let x = "John";
    // y 为String包装对象
    let y = new String("John");

    document.getElementById("demo").innerHTML =
      typeof x + "<br>" + typeof y;
  </script>
</body>
</html>

代码原逻辑为：分别声明字符串字面量x = "John"、String包装对象y = new String("John")，通过typeof运算符输出二者的类型。测试中出现两个异常现象：

• 仅删除typeof x中的x后运行代码，页面无空格、无换行输出numberobject
• 仅删除typeof y中的y后运行代码，页面无任何输出

现象1：输出numberobject的成因 #

该现象由JavaScript的运算符优先级、运算符多义性规则共同导致：

• 删除x后，原赋值表达式从typeof x + "<br>" + typeof y变为typeof + "<br>" + typeof y
• typeof和一元正号+同属最高优先级的一元运算符，执行优先级高于二元加法运算符，且遵循右结合规则。此时原本作为二元字符串拼接符的第一个+，会被JS引擎识别为一元正号运算符，直接作用于紧接其后的字符串"<br>"，尝试将其转换为数字类型：非数字格式的字符串<br>转换失败，得到结果NaN
• 随后typeof对一元正号的运算结果NaN做类型检测，typeof NaN的返回值为字符串"number"
• 此过程中"<br>"已经被一元正号当作操作数消费，不会作为字符串内容拼接到最终结果里。剩余运算逻辑为"number" + typeof y，而typeof new String("John")的返回值为"object"，两个字符串直接拼接就得到了numberobject，由于没有换行标签<br>，输出自然不会产生换行。

现象2：页面无任何输出的成因 #

• 删除y后，表达式末尾变为裸露的typeof运算符。typeof作为一元运算符，后面必须跟随合法操作数，否则会直接触发语法错误。
• JavaScript执行代码前会先对整个<script>块做语法解析，只要块内存在语法错误，整个块的代码会被直接拒绝执行，不会运行任何一行逻辑。因此给demo元素赋值的代码根本没有被执行，页面自然没有任何输出，打开浏览器开发者工具控制台可以看到对应报错：Uncaught SyntaxError: Unexpected end of input。

内容的提问来源于stack exchange，提问作者lv1