NestJS生成CDN存储JS文件时单引号转义致JSON.parse报错

问题场景 #

NestJS项目中需要将元数据序列化为JS文件写入CDN Blob存储，要求生成的JS文件暴露metadata()方法，调用后返回解析后的元数据对象，且元数据中${}格式的占位符需要原样保留，不能将包裹JSON字符串的外层单引号替换为反引号。
当前直接使用JSON.stringify拼接生成的代码，在元数据值包含单引号时，浏览器加载执行会触发JSON解析错误。

问题根因 #

外层使用单引号包裹JSON字符串时，如果JSON.stringify输出的内容本身包含单引号（比如示例中prop2的值John's pet），会直接截断单引号字符串的边界，导致JS语法错误，后续JSON.parse接收到的是残缺的字符串，自然抛出解析异常。

修复方案 #

在拼接最终JS内容前，对JSON.stringify输出的JSON字符串做单引号转义处理，将所有单引号替换为JS单引号字符串的合法转义序列\'即可。该操作不会修改原始JSON内容，也不会影响${}占位符的保留。

修正后的代码 #

function writeToCDN(metadata){
    // 序列化JSON后转义单引号，适配外层单引号字符串语法
    const jsonString = JSON.stringify(metadata).replace(/'/g, "\\'");
    const content = `var metadata = ()=>JSON.parse('${jsonString}')`;
    // 原有写入CDN Blob的逻辑保持不变
}

方案有效性说明 #

• 未修改外层单引号包裹逻辑，${}占位符会被完整保留为普通字符串，不会触发模板字符串插值
• 转义字符\'会在JS解析单引号字符串时被自动还原为普通单引号，传入JSON.parse的内容和JSON.stringify原始输出完全一致，不会破坏JSON结构
• 以示例元数据为例，最终生成的JS内容为var metadata = ()=>JSON.parse('{"prop1":"${resolvedprop1}","prop2":"John\'s pet"}')，浏览器执行时可正常解析，无语法错误

若运行环境支持String.prototype.replaceAll，也可以将正则替换替换为.replaceAll("'", "\\'")，效果完全相同。

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