如何在JavaScript中使用类似Ruby的字符串插值修正URL拼接问题？

你遇到的问题是字符串拼接时的引号位置错误——你把item.id.videoId放在了href属性的双引号外面，所以浏览器把它解析成了<a>标签的一个额外属性，而不是URL的一部分。

在JavaScript里，实现类似Ruby中#{}的字符串插值，最简洁的方式是使用ES6模板字面量（Template Literals），用反引号（）包裹整个字符串，变量则放在${}`语法中插入。

修正后的代码 #

$('#ytResultsList').append(`<li><a href="https://www.youtube.com/watch?v=${item.id.videoId}"></a></li>`);

这样生成的HTML就会是你期望的格式：

<li><a href="https://www.youtube.com/watch?v=bruvbiwlwfi"></a></li>

兼容旧环境的替代方案 #

如果你的项目需要兼容不支持ES6的旧浏览器，也可以调整传统字符串拼接的引号位置，把item.id.videoId正确放在href的双引号内部：

$('#ytResultsList').append('<li><a href="https://www.youtube.com/watch?v=' + item.id.videoId + '"></a></li>');

不过模板字面量的写法更直观，不容易出现引号匹配错误，是现在更推荐的写法。

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