Различные строковые представления в HTML и JS

Question

Я заметил некоторую разницу в представлении строк в DOM, переданных с сервера как атрибут HTML, или как глобальный var.

Существует строка, которая является JSON закодированный объект с помощью специальных символов в нем и установить эту строку в folowing способами:

<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> 

Теперь проверьте их ЯШ:

;(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 значения атрибутов.

Для того, что стоит, escape-последовательности в 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

И, конечно же, есть возможность вставки специальных символов в буквальном смысле, как это, не прибегая к бегству последовательности, а также.