jQuery调用data()获取table的data-keys属性返回字符串而非数组如何解决

问题原因 #

HTML的自定义data属性本身仅支持存储字符串，jQuery的data()方法仅会自动解析符合标准JSON格式的属性值为对应JS类型。你当前模板渲染出的data-keys值是单引号包裹的数组字符串，不符合JSON规范，因此jQuery不会自动转换类型，只会返回原始字符串。

方案1：修改模板渲染逻辑（最优方案，无需额外处理） #

在模板输出data-keys属性时，直接将数组序列化为标准JSON格式即可，不同模板引擎的实现参考：

• Jinja2/Django 模板：<table id="table" data-keys="{{ keys|tojson }}">
• Nunjucks/Express 模板：<table id="table" data-keys="{{ JSON.stringify(keys) }}">
• PHP 模板：<table id="table" data-keys="<?php echo json_encode($keys) ?>">

修改后渲染出的data-keys属性值为双引号包裹的标准JSON，此时直接调用$("#table").data("keys")即可直接拿到数组类型的结果，不需要后续转换。

方案2：前端手动转换（无法修改模板时使用） #

如果没有权限调整模板代码，可以手动将字符串转换为数组：

1. 通用安全写法（推荐）

const rawKeys = $("#table").data("keys")
// 把单引号替换为双引号后解析JSON
const keys = JSON.parse(rawKeys.replace(/'/g, '"'))

提示：如果数组元素本身包含单引号，需要根据实际内容调整替换规则，避免解析失败

2. 可控内容简化写法
   如果确认data-keys的内容完全可控，没有注入风险，可以用更简单的写法：

const keys = eval($("#table").data("keys"))

注意：禁止在内容不可控的场景下使用eval，避免XSS安全漏洞

内容的提问来源于stack exchange，提问作者Malvinka