JavaScript模板字符串语法错误求助：Guardian API新闻卡片渲染问题

核心错误原因 #

你代码里的模板字符串误用了单引号（'）包裹，而ES6模板字符串必须使用反引号（）才能让${}表达式被正确解析，用单引号会把${}`当成普通字符串处理，直接引发语法错误。

修正后的完整代码 #

const GetNews = async (page) => {
    console.log('Retrieving News Articles...');
    // 替换为你的实际API密钥
    const apiKey = 'YOUR_API_KEY';
    // 用模板字符串优化URL拼接，避免繁琐的加号拼接
    const 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=${apiKey}`;

    const req = new Request(url);
    // 补充实际的API请求逻辑
    const response = await fetch(req).then(res => res.json());
    console.log(response);

    let str = '';
    // Guardian API的新闻列表在response.response.results路径下
    for (let item of response.response.results) {
        // 用反引号包裹模板字符串，内部直接使用双引号，无需转义"
        str += `
            <div class="card my-4 mx-4" style="width: 20.5rem;">
                <!-- 空值处理：避免无缩略图时src为空 -->
                <img src="${item.fields.thumbnail || ''}" class="card-img-top" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">${item.fields.headline}</h5>
                    <p class="card-text">${item.fields.trailText}</p>
                    <a href="${item.webUrl}" target="_blank" class="btn btn-primary">Read More</a>
                </div>
            </div>
        `;
    }
    // 将生成的HTML插入到页面容器中（示例）
    // document.getElementById('news-container').innerHTML = str;
};

关键修正点说明 #

• 模板字符串语法：必须用反引号（）包裹字符串，内部的${变量}`才能被正确解析为对应的值。
• API数据结构修正：Guardian API返回的新闻字段（如缩略图、标题）都在item.fields对象下，直接写item.thumbnail无法获取到数据。
• URL拼接优化：用模板字符串重构URL，比加号拼接更简洁，减少拼写错误概率。
• 空值防护：给thumbnail添加|| ''，避免因字段缺失导致img标签的src属性为空，引发浏览器警告。
• 引号规范：模板字符串内部的HTML属性使用双引号，既符合HTML语法，也避免和外层反引号冲突。

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