在 Javascript 中编写字符串中的函数很困难

Question

我正在将 Guardian API 用于一个项目，以创建一个基于新闻的小型 Web 应用程序，以在单个页面上显示内容。当我尝试在字符串中编写函数时，我主要在 JavaScript 中的引用方面遇到困难。根据结果，信息应填充一张带有缩略图、标题等的卡片。

这是剧本。

        const GetNews = async (page) => {

            console.log('Retrieving News Articles...')
            var url = 'https://content.guardianapis.com/search?' +
                      ' from-date=2023-01-01&' +
                      'to-date=2024-01-05&' +
                      'show-fields=trailText%2Cheadline%2Cthumbnail&' +
                      'page=' +page+
                      '&' +
                      'q=Sport&' +
                      'api-key=64b4ba41-ef40-488f-a4fe-d9aaf95483b5';

            var req = new Request(url);

            let response = {"response":...}
                console.log(response)
            let str = ''
            for (let item of response.results) {
                str = str + '<div class="card my-4 mx-4" style="width: 20.5rem;">\
                             <img src= '${item.thumbnail}' class="card-img-top" alt="Card image cap">\
                             <div class="card-body">\
                             <h5 class="card-title">'${item.headline}'</h5>\
                             <p class="card-text">'${item.trailText}'</p>\
                             <a href="${item.webUrl}" target="_blank" class="btn btn-primary">Read More</a>\
                             </div>\
                             </div>'
        }

我尝试过不同的语法，但我不知道我是否写错了，需要注意的是，我对 JavaScript 相对缺乏经验。

从下面的视频中，我看到人们正常编写这些表达式，它们显示不同的颜色以表示它们与引号分开，但经过研究，我读到 $ 运算符只能与单引号一起使用，因此我编写代码的原因方式。

Answer 1

您走在正确的道路上。在 JS 中，您可以执行表达式并将它们放入字符串中，如下所示：

console.log(`Function result: ${someFunction()}`);

你的语法有两个错误。第一个是使用单引号（'）；对于使用“${}”语法的字符串，必须使用反引号 (`)。另一个错误是每次使用“${}”语法时关闭引号，请使用以下命令：

str = str + '<div class="card my-4 mx-4" style="width: 20.5rem;">\
                             <img src= '${item.thumbnail}' class="card-img-top" alt="Card image cap">\
                             <div class="card-body">\
                             <h5 class="card-title">${item.headline}</h5>\
                             <p class="card-text">'${item.trailText}'</p>\
                             <a href="${item.webUrl}" target="_blank" class="btn btn-primary">Read More</a>\
                             </div>\
                             </div>'