为什么toLocaleTimeString分秒自动补零？如何实现分秒无前置零输出？

解决方案 #

你之前测试时minute: 'numeric'不生效，是因为只指定了分钟、秒的格式，未显式声明小时格式，部分浏览器的Intl实现会默认对齐字段位数导致自动补零。另外timeStyle这类预设配置优先级高于自定义字段格式，会覆盖你设置的分钟、秒规则，需要去掉。

按照如下配置即可实现需求：

const date = new Date('2/21/2021, 13:2:3')

// 24小时制格式
const time24 = date.toLocaleTimeString('zh-CN', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hour12: false
})
// 输出结果：13:2:3

// 12小时制格式
const time12 = date.toLocaleTimeString('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hour12: true
})
// 输出结果：1:2:3 PM

如果遇到部分浏览器的Intl实现仍自动补前导零的极端情况，可以用原生Date方法手动拼接，完全可控无依赖：

const date = new Date('2/21/2021, 13:2:3')
const h = date.getHours()
const m = date.getMinutes()
const s = date.getSeconds()

// 24小时制
console.log(`${h}:${m}:${s}`) // 13:2:3

// 12小时制
const suffix = h >= 12 ? 'PM' : 'AM'
const h12 = h % 12 || 12
console.log(`${h12}:${m}:${s} ${suffix}`) // 1:2:3 PM

内容的提问来源于stack exchange，提问作者Mir-Ismaili