在JavaScript中，很难在字符串内部编写一个函数。

Question

我正在为一个项目使用Guardian API，该项目旨在创建一个小型基于新闻的网络应用，以便在单个页面上展示内容。我在尝试在字符串中编写函数时，主要在JavaScript中引用遇到了困难。根据结果，信息应该填充卡片，包括缩略图、标题等。

这是脚本代码：

        const GetNews = async (page) => {

            console.log('正在检索新闻文章...')
            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]'; // 这里应替换为实际的API密钥

            var req = new Request(url);

            // 注意：这里的response应通过fetch或其他方式从url获取，而不是直接赋值
            let response = {"response":...} 
            console.log(response);
            let str = '';
            for (let item of response.results) {
                str += '\
                         \
                         \
                         ' + item.headline + '\
                         ' + item.trailText + '\
                         了解更多\
                         \
                         ';
            }
        }

我尝试了不同的语法，但不知道是否写法有误。需要说明的是，我在JavaScript方面经验有限。
从观看的一些视频中，我看到人们正常编写这些表达式时，它们会显示出不同的颜色，以此来区分它们是独立于引号之外的。但经过查询资料，我发现 $ 运算符仅能与单引号配合使用，这也是我采用当前这种编码方式的原因。

user225312 · Answer

你已经做得很好了。在JavaScript中，你可以像这样在字符串中执行表达式并插入它们：

console.log(`函数结果: ${someFunction()}`);

你的语法中有一个小错误，你使用了单引号(')，但你应该用反引号（）来包围使用${}`语法的字符串。正确的做法应该是这样的：

str = str + `
                             
                             
                             ${item.headline}
                             ${item.trailText}
                             了解更多
                             
                             
`;

这类字符串被称为“模板字面量”（Template Literals）。想要了解更多关于这个主题的内容，可以访问MDN Web Docs上的相关页面。

Rob Napier · Answer

直接将响应项的值设置到DOM中可能会更简单、更安全，而不是将其设置到一个长HTML字符串中。但如果你决定继续使用长字符串的方式，那么我建议确保使用来自Mozilla MDN Web Docs的字符串模板语法来进行字符串插值。

或者，你可以直接手动更新DOM，避免进行长字符串的拼接。