在javascript中使用模板字符串时出现额外字符答案

【问题标题】：extra character appears when using template strings in javascript在javascript中使用模板字符串时出现额外字符
【发布时间】：2023-02-08 03:09:16
【问题描述】：

我有这个简单的函数，它应该返回一个带有 svg text 和多个 tspans 的字符串

export const TextBlock: (block: ValidatedTextBlock) => Promise<string> = async (block) => {
    const anchor =
        block.textAlign === 'center' ? 'middle' : block.textAlign === 'left' ? 'start' : 'end';
    const x =
        block.textAlign === 'center'
            ? block.width / 2 + block.left
            : block.textAlign === 'left'
            ? block.left
            : block.width + block.left;
    console.log(block.textLines);
    return `
    <text
      x="${x}"
      y="${block.top}"
      font-family="${block.fontFamily.split('/').pop()?.split('.').shift()}"
      font-size="${block.fontSize}"
      fill="${block.fill}"
      dominant-baseline="start"
      alignment-baseline="hanging"
      text-anchor="${anchor}"
      transform="$rotate(${block.rotation} ${block.left + block.width / 2} ${
        block.top + block.height / 2
    })"
    >
      ${block.textLines.map((line, i) => {
                console.log(line);
                return `
          <tspan
            dy="${i === 0 ? '0' : `${block.lineHeight}em`}"
            x="${x}"
            text-anchor="${anchor}"
            letter-spacing="${block.charSpacing}em"
            alignment-baseline="hanging"
          >
            ${line}
          </tspan>
          `;
            })}
    </text>
    `;
};

当我控制台记录 textLines 时，我得到了预期的字符串数组，但在最终的 svg 中我得到了这个

<tspan
            dy="0"
            x="808"
            text-anchor="middle"
            letter-spacing="0em"
            alignment-baseline="hanging"
          >
            first line
          </tspan>
          ,
          <tspan
            dy="1.6em"
            x="808"
            text-anchor="middle"
            letter-spacing="0em"
            alignment-baseline="hanging"
          >
            second line
          </tspan>
          ,
          <tspan
            dy="1.6em"
            x="808"
            text-anchor="middle"
            letter-spacing="0em"
            alignment-baseline="hanging"
          >
            third line
          </tspan>

行与行之间有一个额外的逗号，它只存在于行之间而不是之前或之后，如果我只用一个字符串运行函数，它就不会发生，我什至不知道如何开始调试它，因为它无处可去在我的代码中（我可以看到）并且它不是仅在行之间附加到每一行的额外字符，我尝试删除 map 函数中的索引但我得到了相同的结果

【问题讨论】：

当我在地图中记录该行时，它也只记录没有任何其他字符的文本

标签： javascript typescript svg

【解决方案1】：

.map() 调用的结果与默认的逗号分隔符连接在一起。您应该可以在地图后添加自己的 .join()，例如 .join("")。

就像是

  ${block.textLines.map((line, i) => {
            console.log(line);
            return `
      <tspan
        dy="${i === 0 ? '0' : `${block.lineHeight}em`}"
        x="${x}"
        text-anchor="${anchor}"
        letter-spacing="${block.charSpacing}em"
        alignment-baseline="hanging"
      >
        ${line}
      </tspan>
      `;
        }).join("")}

【讨论】：