Javascript HTML和JS中不同的字符串表示法

我注意到在将从服务器传递的DOM中的字符串表示为HTML属性或全局变量时存在一些差异

有一个字符串是JSON编码的对象，其中包含特殊字符，并按以下方式设置此字符串：

<div id="my-id"
    data-opt='[{"id":"600900340","parent_id":"600900000","name":"\tCollector\u0027s Cars \u0026 Models","visible":"1","level":"3"}]'
></div>

<script>
    window.opt = '[{"id":"600900340","parent_id":"600900000","name":"\tCollector\u0027s Cars \u0026 Models","visible":"1","level":"3"}]';
</script>

输出：

[{"id":"600900340","parent_id":"600900000","name":"\tCollector\u0027s Cars \u0026 Models","visible":"1","level":"3"}]

[{"id":"600900340","parent_id":"600900000","name":" Collector's Cars & Models","visible":"1","level":"3"}]

为什么它们不同

---

这里是JSFIDLE

，因为在JavaScript字符串（包括JSON）中具有特殊含义的转义序列，如

\t

和

\u####

，在HTML属性值中没有意义

值得一提的是，HTML中的转义序列采用实体引用的形式。也就是说：

<div id="my-id"
    data-opt='[{"id":"600900340","parent_id":"600900000","name":"&#9;Collector&#x0027;s Cars &#x0026; Models","visible":"1","level":"3"}]'
></div>

当然，还可以选择按原样插入特殊字符，而无需使用转义序列。

“它们为什么不同？”——因为在JavaScript上下文（

window.opt

）中使用JavaScript unicode转义语法一次，在HTML上下文中使用一次，在HTML上下文中仅按原样执行（

数据选项

）。

<div id="my-id"
    data-opt='[{"id":"600900340","parent_id":"600900000","name":"&#9;Collector&#x0027;s Cars &#x0026; Models","visible":"1","level":"3"}]'
></div>