jQueryの.data(key)はjQuery.parseJSONでparseできないときにobjectを返せないからstringを返すよ

JavaScript jQuery

「JavaScript部分にサーバ側で動的な値入れるのエスケープ考えないとだし嫌だよねー」
「htmlタグのdata属性使ってhtmlのエスケープだけ考えればいいようにしたいよねー」
とか思って

<html data-name="monmon">

みたいなことよくやります。

で、さらにjQueryなら

<html data-obj='{"name":"monmon"}'>
<script type="text/javascript">
console.log($('html').data('obj'));      // Object {name: "monmon"}
console.log($('html').data('obj').name); // monmon
</script>

という感じでJSON形式で書いて.data(key)使ってオブジェクトで受け取るなんてこともよくやります。

なのですが、「\が入ったときどうなるの？」って質問されてちゃんとドキュメント読んでないことに気づきました。

When the data attribute is an object (starts with '{') or array (starts with '[') then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. If the value isn't parseable as a JavaScript value, it is left as a string.

.data() | jQuery API Documentation

「validならjQuery.parseJSONでparseしてオブジェクトで返すけど、parseできないなら文字列で返すよー」って話だった。
具体的にはjQueryの.data(key)はobjectを返す場合とstringを返す場合がある - jsdo.it - Share JavaScript, HTML5 and CSSの通り。

結論としては、.data(key)で返って来た値でエラー処理入れればいいですね。