如何从自定义HtmlElement（HTML5 Component）的属性字符串创建嵌套JavaScript Array？

先帮你理清楚当前的场景：你正在开发一个基于表格的自定义HTML元素，它的columnConfiguration属性用来定义列的数据库字段名、显示别名和宽度占比，属性值是一段看起来像嵌套数组的字符串，示例代码如下：

<my-html-element columnConfiguration="['Id', 'Id', '0'], ['Description', 'Desc', '80'], ['Abbreviation', 'Abbrv', '20']"></my-html-element>

要把这段属性字符串转换成真正可用的JavaScript嵌套数组，这里给你两个实用的实现方案：

方案1：修复格式后用原生JSON解析 #

注意到你属性里的字符串用了单引号包裹值，但JSON规范要求用双引号。我们只需要先替换单引号为双引号，再给整个字符串套上外层数组的括号，就能用JSON.parse直接解析了：

// 获取目标自定义元素
const customElement = document.querySelector('my-html-element');
// 提取属性中的字符串内容
const configString = customElement.getAttribute('columnConfiguration');
// 修复格式并解析为嵌套数组
const columnConfig = JSON.parse(`[${configString.replace(/'/g, '"')}]`);

console.log(columnConfig);
// 输出结果：[ ["Id","Id","0"], ["Description","Desc","80"], ["Abbreviation","Abbrv","20"] ]

这个方案简单高效，利用原生API完成解析，安全性和可靠性都有保障，适合格式稳定的场景。

方案2：手动拆分解析（适配复杂/可变格式） #

如果你的属性字符串格式可能存在变动，或者需要在解析时加入自定义校验逻辑，可以选择手动拆分处理：

const customElement = document.querySelector('my-html-element');
const configString = customElement.getAttribute('columnConfiguration');

// 按外层的 "]," 拆分出每个列的配置片段
const columnFragments = configString.split('],');
// 遍历片段处理成嵌套数组
const columnConfig = columnFragments.map(fragment => {
  // 去除片段前后的括号和多余空格
  const cleanedFragment = fragment.trim().replace(/^\[|\]$/g, '');
  // 按单引号分隔符拆分出每个列的参数
  return cleanedFragment.split("','");
});

console.log(columnConfig);
// 输出目标嵌套数组

这种方式可以在解析过程中加入额外校验，比如检查每个列配置是否包含3个参数、过滤无效空值等，灵活性更强。

小提醒：属性值的最佳写法 #

如果可以调整属性的写法，建议直接用双引号包裹属性内的字符串值，外层用单引号包裹整个属性内容，这样解析时可以省去替换引号的步骤：

<my-html-element columnConfiguration='["Id", "Id", "0"], ["Description", "Desc", "80"], ["Abbreviation", "Abbrv", "20"]'></my-html-element>

内容来源于stack exchange