如何解决日期格式化中多次字符串替换的冲突问题

修复后的代码 #

Date.prototype.format = function(template) {
    let str = template;
    // 按占位符长度从长到短替换，避免拆分冲突
    str = str.replace(/dddd/g, this.toLocaleString(window.navigator.language, { weekday: 'long' }));
    str = str.replace(/ddd/g, this.toLocaleString(window.navigator.language, { weekday: 'short' }));
    str = str.replace(/yyyy/g, this.getFullYear());
    str = str.replace(/mm/g, (this.getMonth() + 1).toString().padStart(2, '0'));
    str = str.replace(/dd/g, this.getDate().toString().padStart(2, '0'));
    str = str.replace(/HH/g, this.getHours().toString().padStart(2, '0'));
    str = str.replace(/ii/g, this.getMinutes().toString().padStart(2, '0'));
    str = str.replace(/ss/g, this.getSeconds().toString().padStart(2, '0'));
    return str;
};

问题根源 #

你的原代码替换顺序错误：先处理dd再处理ddd，导致模板中的ddd会被拆分为dd + d。比如模板ddd dd-mm-yyyy，前两个d会先被替换为日期（如05），剩下一个d，最终变成05d，后续再找ddd时已无完整匹配，所以输出错误结果。

另外原代码用字符串replace只会替换第一个匹配项，若模板中有多个相同占位符（比如两个dd），无法全部替换。

解决方案原理 #

1. 按占位符长度从长到短替换：
   先处理最长的dddd，再处理ddd，最后处理dd。这样长占位符在短占位符处理前就已经被完整替换，不会被拆分破坏。

2. 正则全局匹配：
   使用/占位符/g的正则表达式替代字符串替换，g表示全局匹配，确保模板中所有出现的该占位符都被替换，而非仅第一个。

测试验证 #

执行以下代码：

const testDate = new Date(2023, 10, 5); // 2023年11月5日，周日
console.log(testDate.format('ddd dd-mm-yyyy')); // 输出：Sun 05-11-2023
console.log(testDate.format('dddd, mm/dd/yyyy HH:ii:ss')); // 输出：Sunday, 11/05/2023 00:00:00

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