HTML data属性中含数组时单引号的使用问题
2026-5-21
解决HTML属性里单引号冲突的问题
嘿，这个问题我太熟悉了——你这段代码里的问题出在属性值用单引号包裹的同时，内部字符串里又出现了单引号，浏览器会把"I'm"里的单引号误判成属性值的结束符，直接导致语法错误。咱们来一步步解决：
1. 用ASCII实体'转义（最稳妥的标准方案）
这是W3C推荐的转义方式，兼容性拉满，不管什么浏览器都能正确解析。修改后的代码如下：
<div data-stuff='["Hi", "I'm a", "String"]'></div>
把内部的单引号替换成'，就能避免和外层属性的单引号冲突。
2. 更换属性的包裹引号（更直观的替代方案）
如果你觉得实体转义看起来有点乱，可以把属性值的包裹符号从单引号换成双引号，这样内部的单引号就不需要转义了——因为双引号和单引号不会互相干扰。不过要注意，JSON规范要求字符串必须用双引号，所以你需要把JSON里的双引号转成HTML实体"，纯HTML里用实体更可靠：
<div data-stuff="["Hi", "I'm a", "String"]"></div>
这样写出来的代码可读性更高，也完全合法。
3. 额外小提示：别用反斜杠转义（坑很多）
有些浏览器可能支持在单引号包裹的属性里用\转义单引号（比如<div data-stuff='["Hi", "I\'m a", "String"]'></div>），但这不是HTML的标准行为，兼容性很差，不建议在生产环境使用。
总结
不是必须使用'，你可以根据场景选择更合适的方案：如果追求兼容性和标准性，用'；如果想要代码更易读，就换属性包裹引号并转义内部双引号。
内容的提问来源于stack exchange，提问作者jaziel tan
相关产品推荐
相关产品推荐
