序号不足两位前面补0

预期目标

原始效果

代码实现

ts 复制代码
	 {`${(index + 1).toString().padStart(2, '0')}. ${item.sentence}`}

要实现自动编号并确保显示为两位数的格式,可以在 {index + 1} 的地方进行格式化。在 JavaScript 中,可以使用 String.prototype.padStart() 方法来补足数字到指定的长度。下面是如何修改你的代码来实现这个效果:

jsx 复制代码
<div className={classNames.sentence_box}>
  {sentence_list.map((item, index) => (
    <div className={classNames.sentence_item} key={index}>
      {`${(index + 1).toString().padStart(2, '0')}. ${item.sentence}`}
    </div>
  ))}
</div>

解释:

  • {${(index + 1).toString().padStart(2, '0')}}:这部分代码将 index + 1 转换成字符串,并使用 padStart(2, '0') 方法来确保字符串长度达到 2,不足部分用 '0' 填充。这样就能确保在单个数字时显示为 010203 等格式。

  • key={index}:在使用 .map() 方法时,确保每个列表项都有一个唯一的 key 属性是很重要的,这有助于 React 在重新渲染时有效地识别每个元素。

这样修改后,你的 <div> 元素将按照你期望的格式显示自动编号。

相关推荐
想躺平的咸鱼干4 分钟前
Volatile解决指令重排和单例模式
java·开发语言·单例模式·线程·并发编程
雪碧聊技术18 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
Owen_Q23 分钟前
Denso Create Programming Contest 2025(AtCoder Beginner Contest 413)
开发语言·算法·职场和发展
·云扬·40 分钟前
【Java源码阅读系列37】深度解读Java BufferedReader 源码
java·开发语言
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
liulilittle1 小时前
C++ i386/AMD64平台汇编指令对齐长度获取实现
c语言·开发语言·汇编·c++
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v2 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript