使用zx调用convert子进程时字符串插值异常，渲染结果多出$和单引号

问题原因 #

zx 的 $ 模板字符串执行命令时，会自动对包含空格、换行等特殊字符的插值变量做 bash 转义，默认会给这类变量套上 $'...' 格式的 ANSI-C 引号。你在代码中手动给 ${annotation} 额外加了双引号，导致转义后的内容被双重包裹，最终 $' 和末尾的 ' 也被当成文字内容传给了 convert 命令渲染到图片上。

解决方案 #

直接删掉 ${annotation} 外层手动添加的双引号即可，zx 会自动将带换行的 annotation 作为完整参数传递，不会出现参数拆分或者多余字符的问题。

修改后的代码如下：

let annotation = `${title}\n ${date.mtime.toISOString()}`
await $`convert ${frameImage} -gravity south -fill white -pointsize 36 -annotate +0+10 ${annotation} ${frameImage}`

如果修改后仍有异常，可以尝试把命令参数显式组装为数组传递，强制规避自动转义的异常：

const convertArgs = [
  frameImage,
  '-gravity', 'south',
  '-fill', 'white',
  '-pointsize', '36',
  '-annotate', '+0+10',
  annotation,
  frameImage
]
await $`convert ${convertArgs}`

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