Razor字符串变量为何在JavaScript中被识别为HTML元素？

这背后是两个关键点共同作用的结果：Razor的渲染逻辑，加上浏览器的一个特殊全局变量行为。

1. Razor的代码渲染过程 #

你在Razor里写的这段代码：

<script> var id = @divId; console.log(id); </script>

会被Razor引擎直接把@divId替换成它的实际值（也就是Ratting_0，因为你的i初始值是0），最终发送到浏览器的JS代码会变成：

var id = Ratting_0; console.log(id);

注意这里的Ratting_0没有被引号包裹，在JavaScript语法里，这不是一个字符串字面量，而是一个标识符（变量名）。

2. 浏览器的自动全局变量注册 #

浏览器有个默认的特殊行为：它会自动把页面中所有带id属性的DOM元素，注册为全局变量，变量名就是元素的id值。也就是说，你页面上的<div id="Ratting_0"> Test Div </div>会被浏览器自动挂载到window.Ratting_0上，指向这个div元素对象。

所以当JS执行var id = Ratting_0;时，它其实是把全局变量Ratting_0（也就是那个div元素）赋值给了局部变量id，这就是为什么控制台显示的是HTML元素对象。

解决方法 #

要让@divId被识别为字符串，只需要用单引号或双引号把它包裹起来，告诉Razor渲染出一个字符串字面量：

<script> 
  var id = '@divId'; 
  console.log(id); // 现在输出的是字符串"Ratting_0"
</script>

这样Razor渲染后的代码会是var id = 'Ratting_0';，符合JavaScript字符串的语法，自然就会被识别为字符串了。

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