JavaScript中如何创建动态字符串？QR码生成问题求解

现存代码的具体报错点 #

• JSON字符串拼接逻辑完全错误：原代码用双引号直接嵌套双引号的写法会触发JS语法解析失败；同时accno、aname是DOM元素对象，并非输入框的实际输入文本，无法直接填充到字符串占位符中。
• 属性取值逻辑颠倒：原代码给本身是字符串类型的acqr变量加.value属性，字符串不存在value属性，永远无法获取到有效输入内容。
• URL参数未做转义处理：QR码接口的query参数直接拼接未转义的JSON字符串，JSON内的双引号、大括号等特殊字符会被浏览器截断，导致接口接收到的data参数残缺，无法生成正确的二维码。
• 存在未定义的变量引用：代码中调用了不存在的qrfinal变量，且HTML结构内缺少对应的下载按钮<a>元素，会触发未定义报错直接阻断程序运行。

修正后的实现逻辑 #

1. 直接通过DOM元素的.value属性，获取用户在两个输入框中输入的实际文本内容，做非空校验避免空参数请求。
2. 先构造符合要求格式的JS对象，再通过JSON.stringify序列化得到标准JSON字符串，避免手动拼接引号导致的语法错误。
3. 用encodeURIComponent对JSON内容做编码处理，保证特殊字符能被QR接口正常解析，不会出现参数截断问题。
4. 移除所有不存在的变量引用，补全缺失的DOM绑定逻辑。

修正后的核心JS代码 #

let qrcode = select("img");
let anameInput = document.getElementById('uname');
let accnoInput = document.getElementById('acnum');
let generateBtn = select("button");

generateBtn.addEventListener("click", generateQR);

function generateQR() {
  // 非空校验
  if (!anameInput.value.trim() || !accnoInput.value.trim()) {
    alert("请输入完整的账户名和账号信息");
    return;
  }
  let size = "1000x1000";
  // 构造符合格式要求的负载对象
  let qrPayload = {
    accountNumber: accnoInput.value.trim(),
    accountName: anameInput.value.trim(),
    bankCode: "BNK"
  };
  // 序列化+编码，保证参数可被接口正常接收
  let data = encodeURIComponent(JSON.stringify(qrPayload));
  let baseURL = "http://api.qrserver.com/v1/create-qr-code/";
  let url = `${baseURL}?data=${data}&size=${size}`; 

  qrcode.src = url;
  // 若需实现下载功能，需在HTML内补全<a download="qr-code.png">下载二维码</a>元素，再补充以下绑定逻辑
  // let downloadBtn = select("a");
  // downloadBtn.href = url;
}

function select(el) {
  return document.querySelector(el);
}

注意：原HTML结构中的两个输入框是textarea标签，若要适配下载功能，记得在二维码生成完成后，将下载按钮的href绑定到生成的二维码URL上即可。

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