无法从数据属性解析 JSON [重复]答案

【问题标题】：Can't parse JSON from data attribute [duplicate]无法从数据属性解析 JSON [重复]
【发布时间】：2020-06-17 02:44:09
【问题描述】：

我目前正在尝试从数据属性解析 JSON，但出现错误：

Uncaught SyntaxError: Unexpected token � in JSON at position 0

这是我的代码：

jQuery( document ).ready( function ( $ ) {
	let variations = $( "span" ).data( "variations" );

	$( JSON.parse( variations ) ).each( function ( index, variation ) {
		console.log( variation );
	} );
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-variations='["\ud83d\udc36","\ud83d\udc31"]'></span>

我不明白。我正在使用此函数在 PHP 中打印 JSON，但在这里我陷入了困境：

<span data-variations='<?= esc_html( json_encode( $variations ) ) ?>'></span>

【问题讨论】：

那么，variations的内容是什么？
当字符串以'{'或'['开头时，则使用jQuery.parseJSON进行解析；它必须遵循有效的 JSON 语法，包括引用的属性名称。无法解析为 JavaScript 值的字符串不会被转换。 -- 看起来jQuery已经为你解析好了，不需要再JSON.parse了。
@Zeljka 在这种情况下它被解释为 JSON（由 jQuery）。
@Zeljka ["\ud83d\udc36","\ud83d\udc31"] 是一个有效的 JSON。
@Zeljka：不，这不是那里发生的事情。它是一个有效的 JSON 字符串，因此，它被解析为一个 JOSN 字符串。

标签： javascript php jquery

【解决方案1】：

您遇到此问题是因为 variations 已经具有解析值 as said in the doc ：

当字符串以'{'或'['开头时，则使用jQuery.parseJSON对其进行解析

jQuery( document ).ready( function ( $ ) {
	let variations = $( "span" ).data( "variations" );

	$( variations ).each( function ( index, variation ) {
		console.log( variation );
	} );
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-variations='["\ud83d\udc36","\ud83d\udc31"]'></span>

【讨论】：

请注意，这个 jQuery 行为不同于 native dataset property
假设它是有效的 JSON。这将返回一个字符串：data-data="{'test':1}"

【解决方案2】：

jQuery 注意到data- 属性的值是有效的JSON，所以你从.data("variations") 调用中得到一个解析的对象。不用自己解析。

【讨论】：

这种行为也许令人惊讶，但在这种情况下就是这样。
<...> 属性为有效 JSON <...>