如何使用JavaScript将书籍描述字段字符数限制为140个

直接在模板渲染前对description字段做截断处理即可，同时补全接口字段缺失的兜底逻辑，避免渲染报错。

核心实现逻辑 #

• 先兜底判断接口是否返回了描述字段，无字段时默认给空字符串，避免取值报错
• 判断描述文本长度，长度不超过140字符时直接原样渲染
• 长度超过140字符时，截取前140位字符，末尾拼接省略号标识内容被截断

修改后可直接使用的代码 #

function renderItemHtml(item) {
  // 处理描述截断
  let description = item.volumeInfo.description || '';
  if (description.length > 140) {
    description = description.slice(0, 140) + '...';
  }

  return `<div class="book"><img src="${item.volumeInfo.imageLinks?.thumbnail || ''}" class="thumbnails" 
alt="${item.singleTitle} by ${item.volumeInfo.authors?.[0] || '未知作者'}" />
<div>
<h4>${item.volumeInfo.title}</h4>
<p><strong>${item.volumeInfo.authors?.join(', ') || '未知作者'}</strong></p>
<h8>${description}</h8>
</div>
<br>
<h8>Pages:  ${item.volumeInfo.pageCount || '未知'}</h8>
</div>`
}

补充说明 #

• 代码里额外给图片、作者、页数字段加了可选链和兜底值，是为了避免接口返回字段不全时整段JS报错、书籍列表无法渲染的问题，如果不需要可以自行删除
• 如果要求不能从单词中间截断，可以把截断逻辑调整为找到140字符位置前最近的空格位置做截取，常规业务场景下上面的写法已经完全满足要求

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