JavaScript模板字符串生成SVG时出现多余逗号问题

问题根源 #

你碰到的逗号问题，核心原因是数组在模板字符串中自动转字符串时，默认会用逗号分隔元素。当你用map生成tspan字符串数组后直接插入模板，JavaScript会调用数组的toString()方法，把数组元素拼接成带逗号的字符串，最终导致SVG里出现多余逗号。

解决方案 #

在map之后调用join('')，将数组转为无分隔符的字符串，就能彻底消除逗号：

错误写法（会产生逗号） #

async function TextBlock(textLines) {
  return `<text x="0" y="0">${textLines.map(line => `<tspan>${line}</tspan>`)}</text>`;
}

正确写法（消除逗号） #

async function TextBlock(textLines) {
  const tspanElements = textLines.map(line => `<tspan dy="1.2em" x="0">${line}</tspan>`).join('');
  return `<text x="0" y="20" font-size="16">${tspanElements}</text>`;
}

补充说明 #

• 传入单个字符串时无问题，是因为此时textLines要么不是数组，要么数组只有一个元素，toString()不会生成逗号。
• 移除map的索引参数没用，因为问题根源是数组转字符串的默认行为，和map的回调参数无关。

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