如何正确转义JS变量以显示用户头像？求技术解决方案

你这段代码的核心问题是字符串拼接的语法错误——你把变量this['user_avatar']写在了单引号包裹的字符串内部，JavaScript会把它当成普通文本直接输出，而不会解析成变量对应的值。

给你两种正确的实现方式：

方式一：修复字符串拼接语法 #

把变量移出单引号范围，用+正确连接字符串和变量：

$.each(obj, function() { 
  result = result + "<img class='user-pic' alt='' src='assets/global/img/avatars/" + this['user_avatar'] + "'/> </a></div>"; 
});

这里将src路径拆分为字符串前缀、变量、字符串后缀三部分，通过+拼接后，JavaScript才会把this['user_avatar']解析为对应的头像文件名。

方式二：使用ES6模板字符串（推荐） #

用反引号`包裹整个HTML片段，变量用${变量名}直接嵌入，写法更直观，能避免拼接时的语法错误：

$.each(obj, function() { 
  result = result + `<img class='user-pic' alt='' src='assets/global/img/avatars/${this.user_avatar}'/> </a></div>`; 
});

这里还把this['user_avatar']简化成了this.user_avatar，两种写法功能等价，但后者可读性更强。

额外提醒 #

• 确保this.user_avatar能获取到正确的头像文件名（比如avatar-01.png这种带后缀的完整格式），否则图片会加载失败
• 如果result没有提前初始化，记得先声明let result = ''，避免出现undefined拼接的问题

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