React新手求助：如何将MySQL TIME类型格式化为9.00格式？

嗨，作为React新手遇到这种时间格式转换的问题很正常，我来帮你搞定它！你想要把09:00:00这样的TIME格式转成9.00，其实不管是用你熟悉的moment.js，还是原生JS，甚至在MySQL查询时直接处理，都能轻松实现。

方法一：用moment.js格式化（你已经熟悉的工具） #

moment.js完全支持TIME类型字符串的解析和格式化，只是需要明确指定输入格式。试试这段代码：

import moment from 'moment';

// 假设你从接口拿到的start_time是"09:00:00"
let time = reservationsData[row].start_time;
// 解析时分秒格式的字符串，再转成目标格式
let formattedTime = moment(time, 'HH:mm:ss').format('h.mm');
console.log(formattedTime); // 输出 "9.00"

格式说明： #

• HH:mm:ss：告诉moment你的输入是24小时制的时分秒字符串
• h.mm：输出12小时制的小时（不带前导零）+ 分钟（带前导零），用点分隔
• 如果需要24小时制（比如13:00:00转成13.00），把格式改成H.mm即可
• 要是遇到00:00:00想显示0.00而非12.00，可以用k.mm格式（24小时制，0-23，不带前导零）

方法二：原生JavaScript实现（无依赖） #

如果不想引入moment，直接用原生JS拆分字符串也能达到效果，更轻量：

let time = reservationsData[row].start_time; // "09:00:00"
// 拆分出小时和分钟
const [hours, minutes] = time.split(':');
// 把小时转成数字去掉前导零，再拼接分钟
let formattedTime = `${parseInt(hours, 10)}.${minutes}`;
console.log(formattedTime); // 输出 "9.00"

这个方法逻辑简单，完全不需要额外依赖，适合小项目场景。

方法三：MySQL查询时直接格式化（前端少干活） #

你还可以在查询数据库的时候就把时间转成目标格式，这样前端拿到的直接就是9.00，不用再处理：

SELECT 
  id, 
  name, 
  DATE_FORMAT(start_time, '%h.%i') AS formatted_start_time, 
  DATE_FORMAT(end_time, '%h.%i') AS formatted_end_time 
FROM reservations;

SQL格式说明： #

• %h：12小时制小时（不带前导零）
• %i：两位数字的分钟
• 要24小时制的话，把%h换成%H就行

这样前端直接取formatted_start_time字段就可以用啦，省掉前端的格式化步骤。

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