如何使用JavaScript从Google Books API的图片URL提取ID拼接海报地址

实现逻辑 #

从API返回的thumbnail字段的URL中，通过原生URL接口提取id参数值，拼接预设的图片前缀即可生成目标海报地址，比正则匹配更稳定，不受URL参数顺序调整影响。 #

完整代码 #

基础常量 #

const IMG_URL = "http://books.google.com/books/content?id=";

图书渲染函数 #

function showBooks(data){
    data.forEach(book => {
        const {title, authors, description, thumbnail} = book;
        const bookEl = document.createElement('div');
        bookEl.classList.add('book');

        // 提取ID+容错处理，无封面时可替换为自定义占位图
        let coverUrl = '自定义占位图地址';
        if (thumbnail) {
            const urlObj = new URL(thumbnail);
            const bookId = urlObj.searchParams.get('id');
            coverUrl = `${IMG_URL}${bookId}`;
        }

        bookEl.innerHTML = `
        <div class="border"></div>
        <img src="${coverUrl}" alt="${title}封面">
        <div class="book_info">
                <h3>${title || '暂无书名'}</h3>
                <p>${authors?.join('、') || '暂无作者'}</p>
        </div>
        <div class="overview">
                <p>${description || '暂无简介'}</p>
        </div>
        `
        // 此处需将生成的图书元素插入页面对应容器，示例：
        // document.querySelector('.book-list').appendChild(bookEl);
    });
}

注意事项 #

• 若无需调整图片参数，可直接将thumbnail字段的值赋值给img的src属性，无需额外提取ID
• 代码中已增加空值容错，避免部分无封面、无作者信息的图书导致渲染报错
• authors字段为数组格式，使用join方法拼接为字符串展示，多个作者用顿号分隔

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