变量在代码中位置不同输出异常？空格转为""=原因咨询

咱们直接拆解问题，核心是HTML属性解析规则和字符串拼接时的引号冲突在搞事情：

1. 第一种拼接方式出问题的原因 #

你第一次把arr[i].loc（值为304-1477 West Pender Street, canada）放到了onload属性的字符串里，代码是：

html = html + '<img src="img/loaded.gif" alt="" onload="codeAddress("' + arr[i].loc + '");this.parentNode.removeChild(this);" />';

当浏览器解析这段拼接后的HTML时，会先把"转换成实际的双引号，此时onload部分就变成了：

onload="codeAddress("304-1477 West Pender Street, canada");this.parentNode.removeChild(this);"

HTML里属性值是用双引号包裹的，浏览器看到codeAddress(后面的第一个双引号，就会认为onload属性的值到这里结束了！剩下的304-1477被当成了新的HTML属性，空格后的West又变成另一个属性，以此类推——这就是你看到304-1477="" west=""的原因，浏览器把空格分隔的内容都解析成了带空值的独立属性。

2. 第二种拼接方式正常的原因 #

当你把arr[i].loc放到img标签外面时，它不再是HTML属性的一部分，而是普通的文本内容。浏览器渲染文本时，只会把空格当成空格处理，不会解析成属性分隔符，所以输出完全正常。

3. 正确的解决方法 #

方法一：用DOM API创建元素（推荐） #

避开字符串拼接HTML的坑，直接用原生DOM方法创建元素、绑定事件：

// 创建图片元素
const img = document.createElement('img');
img.src = 'img/loaded.gif';
img.alt = '';

// 绑定onload事件，直接传递变量，不用字符串拼接
img.onload = function() {
  codeAddress(arr[i].loc);
  this.parentNode.removeChild(this);
};

// 创建文本节点并添加到容器，再添加图片
const addressText = document.createTextNode(arr[i].loc);
// 替换成你的实际容器元素
const container = document.getElementById('your-container-id');
container.appendChild(addressText);
container.appendChild(img);

方法二：修复字符串拼接（应急方案） #

如果一定要用字符串拼接，需要处理引号冲突和特殊字符转义：

• 用单引号包裹onload的属性值，内部用双引号传递参数，同时转义变量里的双引号：

html = html + '<img src="img/loaded.gif" alt="" onload='codeAddress("' + arr[i].loc.replace(/"/g, '"') + '");this.parentNode.removeChild(this);' />';

• 或者用ES6模板字符串，写法更清晰，同时转义变量里的单引号：

html = html + `<img src="img/loaded.gif" alt="" onload="codeAddress('${arr[i].loc.replace(/'/g, "\\'")}');this.parentNode.removeChild(this);" />`;

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