如何打印或展示dataItem.message的前20个字符？已尝试substring仍无效

• 先校验dataItem.message的类型
  如果dataItem.message可能是null、undefined或非字符串类型，直接调用substring会抛出错误，先做类型判断：

  const displayText = typeof dataItem.message === 'string' 
    ? dataItem.message.substring(0, 20) 
    : ''; // 可替换为你需要的默认文本
  console.log(displayText);
  

• 处理长度不足20的场景（可选加省略号）
  若原字符串长度小于20，substring会直接返回原内容；如果需要在内容过长时添加省略号，可这样写：

  const displayText = typeof dataItem.message === 'string' 
    ? dataItem.message.length > 20 
      ? `${dataItem.message.substring(0, 20)}...` 
      : dataItem.message 
    : '';
  

• 前端框架中直接渲染示例
  Vue模板：

  <span>{{ typeof dataItem.message === 'string' ? dataItem.message.substring(0, 20) : '' }}</span>
  

  React JSX：

  <span>{typeof dataItem.message === 'string' ? dataItem.message.substring(0, 20) : ''}</span>
  

• 排查常见问题
  • 确认dataItem是否正确获取，可通过console.log(dataItem)检查是否为undefined或null
  • 核对message字段名是否拼写正确，避免因字段名错误导致无法读取内容

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