Question

我注意到在从服务器传递的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>

现在用js检查它们：

;(function(window) {
    console.log(document.getElementById('my-id').dataset.opt);
    console.log(window.opt);
}(window))

输出：

[{"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"}]

为什么他们不一样？

这是jsfiddle http://jsfiddle.net/9ss5M/3/

Answer 1

因为\t和\u####等转义序列在JavaScript字符串（包括JSON）中具有特殊含义，所以在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>

Updated fiddle

当然，也可以选择按字面意思插入特殊字符而不使用转义序列。

HTML和JS中的不同字符串表示形式

1 个答案: