在 href 属性中插入 javascript 变量答案

【问题标题】：Insert javascript variable inside href attribute在 href 属性中插入 javascript 变量
【发布时间】：2019-11-02 22:22:31
【问题描述】：

我正在尝试动态生成一个 HTML 链接，并让该链接成为我的 AngularJS 应用程序中锚标记的 href 属性。我有以下代码：

const objectUrl = baseUrl + s3Bucket + '/' + objectKey;
const link = '<a href=`${objectUrl}`> MyLink</a>';

我认为使用 JS 的字符串模板会起作用，但这会在 URL 的末尾插入 %60$%7BobjectUrl%7D%60。我也试过了

const link = '<a href={{objectUrl}}> MyLink</a>';

但这给了我相同的文字字符串%60$%7BobjectUrl%7D%60。有什么办法可以插入变量，让href链接变成baseUrl + s3Bucket + '/' + objectKey？

【问题讨论】：

【解决方案1】：

试试这个

const link = '<a href="'+objectUrl+'" > MyLink</a>';

【讨论】：

【解决方案2】：

你有相反的模板字符串。 ` 应该放在字符串的外面。

const objectUrl = 'yourURL';
const link = `<a href="${objectUrl}">MyLink</a>`;

console.log(link);

【讨论】：

【解决方案3】：

试试

<a ng-attr-href="{{objectUrl}}">My Link</a>

【讨论】：

【解决方案4】：

像这样使用template literal：

const link = `<a href="${objectUrl}">MyLink</a>`

【讨论】：